Devour/devour_data/docs/streaming.json

{
  "id": "a2fb61ea0d412bfb047c5e1e",
  "source": "solid:signals",
  "type": "github-document",
  "title": "streaming",
  "content": "---\ntitle: \"Streaming\"\n---\n\nIn traditional server-rendered applications, the server must fetch all data before rendering and sending the page to the browser.\nIf some queries are slow, this delays the initial load.\n**Streaming** solves this by sending the page’s HTML shell immediately and progressively streaming data-dependent sections as they become ready.\n\nWhen a query is accessed during a server-side render, Solid suspends the UI until the data resolves.\nBy default, this suspension affects the entire page.\n\nTo control this behavior, you can use suspense boundaries - regions of the component tree defined by a [`\u003cSuspense\u003e` component](/reference/components/suspense).\nIt isolates asynchronous behavior to a specific section of the page.\n\nContent inside the boundary is managed by Solid’s concurrency system: if it isn’t ready, the boundary’s fallback UI is shown while the rest of the page renders and streams immediately.\nOnce the data resolves, the server streams the final HTML for that section, replacing the fallback and letting users see and interact with most of the page much sooner.\n\n```tsx\nimport { Suspense, For } from \"solid-js\";\nimport { query, createAsync } from \"@solidjs/router\";\n\nconst getAccountStatsQuery = query(async () =\u003e {\n\t// ... Fetches account statistics.\n}, \"accountStats\");\n\nconst getRecentTransactionsQuery = query(async () =\u003e {\n\t// ... Fetches a list of recent transactions.\n}, \"recentTransactions\");\n\nfunction Dashboard() {\n\tconst stats = createAsync(() =\u003e getAccountStatsQuery());\n\tconst transactions = createAsync(() =\u003e getRecentTransactionsQuery());\n\n\treturn (\n\t\t\u003cdiv\u003e\n\t\t\t\u003ch1\u003eDashboard\u003c/h1\u003e\n\t\t\t\u003cSuspense fallback={\u003cp\u003eLoading account stats...\u003c/p\u003e}\u003e\n\t\t\t\t\u003cFor each={stats()}\u003e\n\t\t\t\t\t{(stat) =\u003e (\n\t\t\t\t\t\t\u003cp\u003e\n\t\t\t\t\t\t\t{stat.label}: {stat.value}\n\t\t\t\t\t\t\u003c/p\u003e\n\t\t\t\t\t)}\n\t\t\t\t\u003c/For\u003e\n\t\t\t\u003c/Suspense\u003e\n\n\t\t\t\u003cSuspense fallback={\u003cp\u003eLoading recent transactions...\u003c/p\u003e}\u003e\n\t\t\t\t\u003cFor each={transactions()}\u003e\n\t\t\t\t\t{(transaction) =\u003e (\n\t\t\t\t\t\t\u003ch2\u003e\n\t\t\t\t\t\t\t{transaction.description} - {transaction.amount}\n\t\t\t\t\t\t\u003c/h2\u003e\n\t\t\t\t\t)}\n\t\t\t\t\u003c/For\u003e\n\t\t\t\u003c/Suspense\u003e\n\t\t\u003c/div\u003e\n\t);\n}\n```\n\nFor example, each `\u003cSuspense\u003e` component creates its own independent boundary.\nThe server can stream the heading `\u003ch1\u003eDashboard\u003c/h1\u003e` immediately, while the `stats` and `transactions` are handled separately.\nIf the `transactions` query is slow, only its boundary will display a fallback, while `stats` will render as soon as its data is ready.\n\n## When to disable streaming\n\nWhile streaming is powerful, there are cases where it is better to wait for the data to load on the server.\nIn these situations, you can use the `deferStream` option in `createAsync`.\n\nWhen `deferStream` is set to `true`, the server waits for the query to resolve before sending the initial HTML.\n\nA common reason to disable streaming is for Search Engine Optimization (SEO).\nSome search engine crawlers may not wait for streamed content to load.\nIf critical data, such as a page title or meta description, affects SEO, it should be included in the initial server response.\n\n```tsx\nimport { query, createAsync } from \"@solidjs/router\";\n\nconst getArticleQuery = query(async () =\u003e {\n\t// ... Fetches an article.\n}, \"article\");\n\nfunction ArticleHeader() {\n\tconst article = createAsync(() =\u003e getArticleQuery(), {\n\t\tdeferStream: true,\n\t});\n\n\treturn \u003ch1\u003e{article()?.title}\u003c/h1\u003e;\n}\n```",
  "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/solid-router/data-fetching/streaming.mdx",
  "metadata": {
    "path": "src/routes/solid-router/data-fetching/streaming.mdx",
    "repo": "solidjs/solid-docs",
    "repo_url": "https://github.com/solidjs/solid-docs.git",
    "size": 3337,
    "source_type": "github"
  },
  "hash": "d9661f4230bf929a27e272c8f4fb2a4a280c5be1d40a40e0a4c58a81d13dab30",
  "timestamp": "2026-02-23T11:43:00.19203116+01:00"
}