‐Streaming

Streaming enables you to progressively render UI from the server. Page sections are streamed to the client as it becomes ready. This allows the user to see parts of the page immediately, before the entire content has finished rendering. This helps improve both the initial page loading performance, as well as UI that depends on slower data fetches that would block rendering the whole page.

<script>
  // views/home.svelte
  import Await from "stack54/components/Await";

  const wait = (ms, value) => {
    return new Promise((resolve) => {
      setTimeout(resolve, ms, value);
    });
  };
</script>

<Await let:value resolve="{wait(1000, 10)}">
    <p slot="error" let:error>{error}</p>
    <p slot="fallback">loading...</p>
    <p>{value}</p>
</Await>

import { renderToStream } from "stack54/render";
import Component from "./views/home.svelte";

renderToStream(Component, props);

Slots

• error: content shown when the promise rejects
• fallback: content shown before the promise resolves/rejects
• default: content shown after the promise resolves

Requires node version with support for ReadableStream