Streaming

This page demonstrates streaming in SvelteKit. The page starts rendering immediately with available data, while slower data streams in as it becomes ready.

Watch the data below load progressively at different intervals!

Immediate Data

Delayed Data (3 seconds) - User List

Delayed Data (5 seconds) - Product List

How It Works

Return promises from your +page.server.ts load function:

export const load: PageServerLoad = async () => 
  const immediateData = { ... };
  
  const slowData = new Promise((resolve) => {
    setTimeout(() => {
      resolve({ ... });
    }, 3000);
  });
  
  return { immediateData, slowData };
;

Use {#await} blocks in your component to handle loading states. The page renders immediately while promises resolve in the background.