svelte/kit-load-waterfall

Why

await parent() waits for every layout above; a fetch written after it starts only then, and a second await fetch after the first waits again. Each step adds a full round trip, so the page renders after the sum of all requests instead of the slowest one.

Fix

Start requests that do not need parent data first (or together with Promise.all) and call await parent() after them. Move chains that depend on each other into a server load, close to the database. Return slow, non-essential data as an un-awaited promise and render it with {#await} so the page streams.

Examples

// bad: +page.js
export async function load({ fetch, parent }) {
  const { user } = await parent()
  const posts = await (await fetch('/api/posts')).json()
  return { user, posts }
}
// good
export async function load({ fetch, parent }) {
  const postsRes = fetch('/api/posts')
  const { user } = await parent()
  return { user, posts: await (await postsRes).json() }
}

Sources

• SvelteKit docs, Loading data (using parent data, streaming with promises)
• SvelteKit docs, Performance (preventing waterfalls)

Read it in the terminal

npx github:dawidolko/frontend-skills explain svelte/kit-load-waterfall