{
  "id": "a94cc1e883bc0b07668b7bdf",
  "source": "solid:signals",
  "type": "github-document",
  "title": "render-to-stream",
  "content": "---\ntitle: renderToStream\nuse_cases: \u003e-\n  streaming ssr, progressive rendering, async data loading, suspense boundaries,\n  large page optimization\ntags:\n  - ssr\n  - streaming\n  - async\n  - suspense\n  - performance\nversion: '1.0'\ndescription: \u003e-\n  Stream HTML progressively with renderToStream. Render content synchronously\n  then stream async resources as they complete for faster loading.\n---\n\n```ts\nimport { renderToStream } from \"solid-js/web\"\n\nfunction renderToStream\u003cT\u003e(\n\tfn: () =\u003e T,\n\toptions?: {\n\t\tnonce?: string\n\t\trenderId?: string\n\t\tonCompleteShell?: () =\u003e void\n\t\tonCompleteAll?: () =\u003e void\n\t}\n): {\n\tpipe: (writable: { write: (v: string) =\u003e void }) =\u003e void\n\tpipeTo: (writable: WritableStream) =\u003e void\n}\n\n```\n\nThis method renders to a stream.\nIt renders the content synchronously including any Suspense fallback placeholders, and then continues to stream the data and HTML from any async resource as it completes.\n\n```ts\n// node\nrenderToStream(App).pipe(res)\n\n// web stream\nconst { readable, writable } = new TransformStream()\nrenderToStream(App).pipeTo(writable)\n```\n\n`onCompleteShell` fires when synchronous rendering is complete before writing the first flush to the stream out to the browser.\n`onCompleteAll` is called when all server Suspense boundaries have settled.\n`renderId` is used to namespace renders when having multiple top level roots.\n\n:::note\n\tThis API replaces the previous pipeToWritable and pipeToNodeWritable\n\tAPIs.\n:::\n\n## Options\n\n| Name            | Type       | Description                                                      |\n| --------------- | ---------- | ---------------------------------------------------------------- |\n| nonce           | string     | The nonce to use for inline scripts.                             |\n| renderId        | string     | The id to use for this render.                                   |\n| onCompleteShell | () =\u003e void | A callback that fires when the shell is complete.                |\n| onCompleteAll   | () =\u003e void | A callback that fires when all Suspense boundaries have settled. |",
  "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/reference/rendering/render-to-stream.mdx",
  "metadata": {
    "path": "src/routes/reference/rendering/render-to-stream.mdx",
    "repo": "solidjs/solid-docs",
    "repo_url": "https://github.com/solidjs/solid-docs.git",
    "size": 2062,
    "source_type": "github"
  },
  "hash": "9c1ae11967e7885ea57ba6bb468373e1264d91fa211cf9b8a8970efa4735b0bd",
  "timestamp": "2026-02-23T11:43:00.190395086+01:00"
}