Streaming Data with Promises

Instead of waiting for all data before rendering, you can stream slow data while showing fast data immediately.

The Problem: Slow Data Blocks Everything

javascript
// ❌ This blocks until BOTH are ready
export async function load() {
  const posts = await getPostsFast();     // 100ms
  const analytics = await getAnalytics(); // 3000ms
  
  return { posts, analytics }; // User waits 3100ms!
}

The Solution: Stream Slow Data

javascript
// ✅ Return promise without awaiting
export async function load() {
  const posts = await getPostsFast(); // Wait for this (fast)
  
  return {
    posts,
    streamed: {
      analytics: getAnalytics() // Don't await! (slow)
    }
  };
}

Handling Streamed Data in Components

svelte
<script>
  let { data } = $props();
</script>

<!-- This renders immediately -->
{#each data.posts as post}
  <article>{post.title}</article>
{/each}

<!-- This streams in when ready -->
{#await data.streamed.analytics}
  <div class="skeleton">Loading analytics...</div>
{:then analytics}
  <div class="stats">
    <p>Views: {analytics.views}</p>
    <p>Visitors: {analytics.visitors}</p>
  </div>
{:catch error}
  <p class="error">Failed to load analytics</p>
{/await}

Multiple Streamed Values

javascript
export async function load() {
  return {
    posts: await getPosts(),
    streamed: {
      comments: getComments(),    // Stream independently
      analytics: getAnalytics(),
      recommendations: getRecommendations()
    }
  };
}

svelte
<!-- Each stream resolves independently -->
{#await data.streamed.comments}...
{#await data.streamed.analytics}...
{#await data.streamed.recommendations}...

When to Stream vs Wait

📖 Streaming documentation