What is SvelteKit's data loading waterfall problem and how do you solve it?

Answer

A data loading waterfall occurs when load functions execute sequentially — each waits for the previous to complete. Layout load functions run before page load functions, creating serial execution. Solutions: Parallel loading with Promise.all: within a single load function, fetch in parallel: const [users, posts] = await Promise.all([fetchUsers(), fetchPosts()]). Return promises without awaiting: SvelteKit allows returning unawaited promises from load functions — SvelteKit awaits them in parallel and uses streaming to send data as it resolves: return { users: fetchUsers(), posts: fetchPosts() }. Use {#await data.users} in the template. Streaming with HTML response: for server load functions, deferred/streamed data allows the browser to start rendering while waiting for slow data. Avoid over-fetching in layouts: only put truly shared data in layout loads; page-specific data belongs in page loads. Cache: use depends/invalidate for fine-grained cache control to avoid refetching unchanged data.