<html lang="en">
<head></head>
<body>

<form id="mainForm" method="post" action="https://stackblitz.com/run" target="_self">
<input type="hidden" name="project[files][CHANGELOG.md]" value="# @tanstack/db-example-react-start-ssr-e2e

## 0.0.3

### Patch Changes

- Updated dependencies [[`9c62ac3`](https://github.com/TanStack/db/commit/9c62ac3782779dc2a91335dd834ad8eb907db109), [`c879ba6`](https://github.com/TanStack/db/commit/c879ba6d855914e5c0cac49af7a007eb5cabe7e4)]:
  - @tanstack/react-db@0.5.0

## 0.0.2

### Patch Changes

- Updated dependencies [[`6e60d30`](https://github.com/TanStack/db/commit/6e60d30a0e19642eeda72895722afdfca6cec749)]:
  - @tanstack/react-db@0.4.0

## 0.0.1

### Patch Changes

- Updated dependencies [[`4b9e8cd`](https://github.com/TanStack/db/commit/4b9e8cdf79551734cf526e6fa4bbdba42ec94575)]:
  - @tanstack/react-db@0.3.0
  - @tanstack/react-router-with-db@0.1.0
">
<input type="hidden" name="project[files][README.md]" value="# TanStack DB Start SSR Demo

This example is a minimal TanStack Start app that demonstrates TanStack DB SSR
with collection-row hydration.

It verifies five things:

- server HTML contains rows loaded through a request-scoped `DbClient`
- the browser hydrates those rows into a client `DbClient`
- fresh adapter sync replaces a stale hydrated row with the same key
- an incremental collection chunk updates an existing live query
- critical collection rows hydrate while a query discovered later in the same
  render streams through a Suspense boundary

Live demo: https://tanstack-db-ssr-demo.netlify.app/ssr-db

## Run Locally

```sh
pnpm --filter @tanstack/db build
pnpm --filter @tanstack/react-db build
pnpm --filter @tanstack/db-example-react-start-ssr-e2e dev
```

Open `/ssr-db` for holistic and incremental hydration, or `/ssr-db-stream` for
render-time Suspense streaming.

## Run E2E

```sh
pnpm --filter @tanstack/db-example-react-start-ssr-e2e test:e2e
```

The Playwright tests cover raw SSR HTML, browser hydration, fresh-sync
reconciliation, incremental collection hydration, and critical hydration plus a
render-time query in the same request. The streaming route shows its Suspense
fallback before the streamed server rows arrive.

## Deploy Demo

The demo requires an SSR-capable host for TanStack Start.

Netlify deployment is configured through `netlify.toml` and
`netlify/functions/server.mjs`. Deploy with:

```sh
cd examples/react/start-ssr-e2e
netlify deploy --prod --site-name tanstack-db-ssr-demo --team tanstack
```

After deployment, verify the live URL with:

```sh
PLAYWRIGHT_BASE_URL=https://your-demo-url pnpm --filter @tanstack/db-example-react-start-ssr-e2e test:e2e:hosted
```
">
<input type="hidden" name="project[files][netlify.toml]" value="[build]
command = &quot;pnpm build&quot;
publish = &quot;dist/client&quot;
functions = &quot;netlify/functions&quot;

[functions]
node_bundler = &quot;esbuild&quot;
included_files = [&quot;dist/server/**&quot;]
">
<input type="hidden" name="project[files][package.json]" value="{
  &quot;name&quot;: &quot;@tanstack/db-example-react-start-ssr-e2e&quot;,
  &quot;private&quot;: true,
  &quot;version&quot;: &quot;0.0.3&quot;,
  &quot;type&quot;: &quot;module&quot;,
  &quot;scripts&quot;: {
    &quot;build&quot;: &quot;vite build&quot;,
    &quot;dev&quot;: &quot;vite dev&quot;,
    &quot;test:e2e&quot;: &quot;pnpm --filter @tanstack/db build &amp;&amp; pnpm --filter @tanstack/react-db build &amp;&amp; pnpm --filter @tanstack/react-router-with-db build &amp;&amp; playwright test&quot;,
    &quot;test:e2e:hosted&quot;: &quot;playwright test&quot;
  },
  &quot;dependencies&quot;: {
    &quot;@tanstack/react-db&quot;: &quot;https://pkg.pr.new/TanStack/db/@tanstack/react-db@79f0fcfbe000fb7d720212e63fec1085ac171ffd&quot;,
    &quot;@tanstack/react-router&quot;: &quot;^1.170.41&quot;,
    &quot;@tanstack/react-router-with-db&quot;: &quot;https://pkg.pr.new/TanStack/db/@tanstack/react-router-with-db@79f0fcfbe000fb7d720212e63fec1085ac171ffd&quot;,
    &quot;@tanstack/react-start&quot;: &quot;^1.168.60&quot;,
    &quot;react&quot;: &quot;^19.2.4&quot;,
    &quot;react-dom&quot;: &quot;^19.2.4&quot;,
    &quot;vite-tsconfig-paths&quot;: &quot;^5.1.4&quot;
  },
  &quot;devDependencies&quot;: {
    &quot;@playwright/test&quot;: &quot;^1.60.0&quot;,
    &quot;@types/node&quot;: &quot;^25.2.2&quot;,
    &quot;@types/react&quot;: &quot;^19.2.13&quot;,
    &quot;@types/react-dom&quot;: &quot;^19.2.3&quot;,
    &quot;@vitejs/plugin-react&quot;: &quot;^5.1.3&quot;,
    &quot;typescript&quot;: &quot;^5.9.2&quot;,
    &quot;vite&quot;: &quot;^7.3.0&quot;
  }
}">
<input type="hidden" name="project[files][playwright.config.ts]" value="import { defineConfig, devices } from &#39;@playwright/test&#39;

const baseURL = process.env.PLAYWRIGHT_BASE_URL ?? `http://127.0.0.1:4175`
const shouldStartWebServer = process.env.PLAYWRIGHT_BASE_URL === undefined

export default defineConfig({
  testDir: `./e2e`,
  timeout: 30000,
  expect: {
    timeout: 10000,
  },
  fullyParallel: false,
  use: {
    baseURL,
    trace: `on-first-retry`,
  },
  webServer: shouldStartWebServer
    ? {
        command: `pnpm dev --host 127.0.0.1 --port 4175`,
        reuseExistingServer: !process.env.CI,
        timeout: 120000,
        url: baseURL,
      }
    : undefined,
  projects: [
    {
      name: `chromium`,
      use: { ...devices[`Desktop Chrome`] },
    },
  ],
})
">
<input type="hidden" name="project[files][tsconfig.json]" value="{
  &quot;extends&quot;: &quot;../../../tsconfig.json&quot;,
  &quot;compilerOptions&quot;: {
    &quot;baseUrl&quot;: &quot;.&quot;,
    &quot;module&quot;: &quot;ES2022&quot;,
    &quot;moduleResolution&quot;: &quot;bundler&quot;,
    &quot;jsx&quot;: &quot;react-jsx&quot;,
    &quot;paths&quot;: {
      &quot;@/*&quot;: [&quot;./src/*&quot;]
    }
  },
  &quot;include&quot;: [
    &quot;e2e/**/*.ts&quot;,
    &quot;e2e/**/*.tsx&quot;,
    &quot;playwright.config.ts&quot;,
    &quot;src/**/*.ts&quot;,
    &quot;src/**/*.tsx&quot;,
    &quot;vite.config.ts&quot;
  ],
  &quot;exclude&quot;: [&quot;dist&quot;, &quot;node_modules&quot;]
}
">
<input type="hidden" name="project[files][vite.config.ts]" value="import { defineConfig } from &#39;vite&#39;
import react from &#39;@vitejs/plugin-react&#39;
import { tanstackStart } from &#39;@tanstack/react-start/plugin/vite&#39;
import viteTsConfigPaths from &#39;vite-tsconfig-paths&#39;

export default defineConfig({
  plugins: [
    viteTsConfigPaths({
      projects: [`./tsconfig.json`],
    }),
    tanstackStart({
      srcDirectory: `src`,
      start: { entry: `./start.tsx` },
    }),
    react(),
  ],
})
">
<input type="hidden" name="project[files][e2e/router-stream-view.spec.ts]" value="import { spawn } from &#39;node:child_process&#39;
import { mkdtemp, rm, writeFile } from &#39;node:fs/promises&#39;
import { tmpdir } from &#39;node:os&#39;
import path from &#39;node:path&#39;
import { fileURLToPath } from &#39;node:url&#39;
import { build } from &#39;esbuild&#39;
import { expect, test } from &#39;@playwright/test&#39;
import { ssrStreamHydrationMismatches } from &#39;../../../../packages/db/tests/ssr-stream-view-oracle&#39;
import type { TestInfo } from &#39;@playwright/test&#39;
import type {
  HostHistory,
  HostObservation,
} from &#39;./router-stream-driver/fixture&#39;
import type { SsrStreamReaderComparison } from &#39;../../../../packages/db/tests/ssr-stream-view-oracle&#39;

/**
 * Receiving driver for the primary stream-view law, using the real Router
 * serializer, HTML transform, manifest-driven Scripts, RouterClient and Chromium.
 * A query discovered ready during the initial render can appear in shell HTML
 * before its record is inserted after the async client entry. Holding the HTTP
 * sink at that record preserves byte order and exposes that legal network cut.
 *
 * The release gate waits for a browser hook attempt, including a suspended one;
 * equality compares its first successful view after delivery with that reader&#39;s
 * recorded server view. Ready-empty, differing browser rows, reader order and a
 * later Suspense reveal distinguish absence from a known pending result. Public
 * close/error controls intentionally omit a required record: they demand failure
 * without false success or a hang. A known pending record&#39;s own promise remains
 * valid after the DB stream closes. These controls do not redefine error data.
 */
const packageRoot = fileURLToPath(new URL(`..`, import.meta.url))
const repositoryRoot = path.resolve(packageRoot, `../../..`)
const fixtures = path.join(packageRoot, `e2e/router-stream-driver`)
// Hostile calibration supplies a separate source copy; the checkout is never swapped.
const dbSourceRoot = process.env.ROUTER_STREAM_DB_SOURCE_ROOT ?? repositoryRoot
let output: string
let origin: string
let host: ReturnType&lt;typeof spawn&gt; | undefined
let sequence = 0
const baseHistory: HostHistory = {
  count: 1,
  writes: 0,
  browserWrite: true,
  discovery: `shell`,
  delivery: `normal`,
  transport: `owned`,
}

test.beforeAll(async () =&gt; {
  output = await mkdtemp(path.join(tmpdir(), `db-router-stream-`))
  const shared = {
    bundle: true,
    jsx: `automatic` as const,
    alias: {
      &#39;@tanstack/db&#39;: path.join(dbSourceRoot, `packages/db/src/index.ts`),
      &#39;@tanstack/react-db&#39;: path.join(
        repositoryRoot,
        `packages/react-db/src/index.ts`,
      ),
      &#39;@tanstack/react-router-with-db&#39;: path.join(
        repositoryRoot,
        `packages/react-router-with-db/src/index.tsx`,
      ),
      &#39;@tanstack/db-ivm&#39;: path.join(
        repositoryRoot,
        `packages/db-ivm/src/index.ts`,
      ),
    },
    // Resolve Router and React from the workspace packages as a normal pnpm
    // install does; DB aliases deliberately exercise fresh production source.
    nodePaths: [
      path.join(repositoryRoot, `node_modules`),
      path.join(repositoryRoot, `packages/react-router-with-db/node_modules`),
      path.join(repositoryRoot, `packages/db/node_modules`),
    ],
    define: { &#39;process.env.NODE_ENV&#39;: `&quot;development&quot;` },
    logLevel: `silent` as const,
  }
  await build({
    ...shared,
    entryPoints: [path.join(fixtures, `client.tsx`)],
    outfile: path.join(output, `client.js`),
    platform: `browser`,
    format: `esm`,
  })
  await build({
    ...shared,
    entryPoints: [path.join(fixtures, `server.tsx`)],
    outfile: path.join(output, `server.cjs`),
    platform: `node`,
    format: `cjs`,
  })
  host = spawn(process.execPath, [path.join(output, `server.cjs`)], {
    env: { ...process.env, ROUTER_STREAM_OUTPUT: output },
    stdio: [`ignore`, `pipe`, `pipe`],
  })
  origin = await new Promise&lt;string&gt;((resolve, reject) =&gt; {
    let text = ``
    host!.stdout!.on(`data`, (chunk) =&gt; {
      text += String(chunk)
      const ready = text.match(/\{&quot;port&quot;:(\d+)\}/)
      if (ready) resolve(`http://127.0.0.1:${ready[1]}`)
    })
    host!.once(`error`, reject)
    host!.once(`exit`, (code) =&gt;
      reject(new Error(`Router stream host exited ${code}`)),
    )
    host!.stderr!.on(`data`, (chunk) =&gt; process.stderr.write(chunk))
  })
})
test.afterAll(async () =&gt; {
  host?.kill()
  if (output) await rm(output, { recursive: true, force: true })
})

async function attachJson(
  testInfo: TestInfo,
  name: string,
  observations: unknown,
) {
  const target = testInfo.outputPath(`${name}.json`)
  await writeFile(target, JSON.stringify(observations, null, 2))
  await testInfo.attach(name, { path: target, contentType: `application/json` })
}

const firstViews = (observations: ReadonlyArray&lt;HostObservation&gt;) =&gt; {
  const views = new Map&lt;string, NonNullable&lt;HostObservation[`view`]&gt;&gt;()
  for (const observation of observations) {
    if (
      observation.type === `view` &amp;&amp;
      observation.reader &amp;&amp;
      observation.view &amp;&amp;
      !views.has(observation.reader)
    ) {
      views.set(observation.reader, observation.view)
    }
  }
  return views
}

for (const history of [
  baseHistory,
  { ...baseHistory, delivery: `held` as const },
  { ...baseHistory, delivery: `held` as const, browserPreload: true },
  { ...baseHistory, count: 0, delivery: `held` as const },
  { ...baseHistory, browserWrite: false, delivery: `held` as const },
  { ...baseHistory, ordinaryFirst: true, delivery: `held` as const },
  { ...baseHistory, ordinaryLast: true, delivery: `held` as const },
  { ...baseHistory, count: 0, ordinaryFirst: true, delivery: `held` as const },
  { ...baseHistory, discovery: `boundary` as const },
  { ...baseHistory, discovery: `boundary` as const, ordinaryLast: true },
]) {
  test(`reproduces each server view ${JSON.stringify(history)}`, async ({
    page,
    request,
  }, testInfo) =&gt; {
    const id = String(++sequence)
    const url = `${origin}/?id=${id}&amp;history=${encodeURIComponent(JSON.stringify(history))}`
    await page.goto(url, { waitUntil: `commit` })
    let beforeRelease: Array&lt;HostObservation&gt; = []
    if (history.delivery === `held`) {
      await page.waitForFunction(() =&gt;
        window.streamViews?.some(
          (observation) =&gt; observation.type === `attempt`,
        ),
      )
      beforeRelease = await page.evaluate(() =&gt; window.streamViews ?? [])
      const waiting = await (
        await request.get(`${origin}/observations?id=${id}`)
      ).json()
      expect(waiting.waiting, `HTTP sink reached the first query record`).toBe(
        true,
      )
      await request.post(`${origin}/release?id=${id}`)
    }
    await page.waitForFunction(() =&gt;
      window.streamViews?.some(
        (observation) =&gt;
          (observation.type === `view` &amp;&amp; observation.reader === `suspense`) ||
          observation.type === `boundary-error`,
      ),
    )
    await page.waitForLoadState(`networkidle`)
    const browser = await page.evaluate(() =&gt; window.streamViews ?? [])
    const server = (await (
      await request.get(`${origin}/observations?id=${id}`)
    ).json()) as {
      observations: Array&lt;HostObservation&gt;
      chunks: Array&lt;{ text: string }&gt;
    }
    const serverViews = firstViews(server.observations)
    const browserViews = firstViews(browser)
    expect(
      serverViews.has(`suspense`),
      `server reached a successful Suspense view`,
    ).toBe(true)
    const comparisons: Array&lt;SsrStreamReaderComparison&gt; = [...serverViews].map(
      ([reader, view]) =&gt; ({
        reader,
        server: view,
        hydration: browserViews.get(reader),
      }),
    )
    await attachJson(testInfo, `stream-receiving-observations`, {
      history,
      beforeRelease,
      server,
      browser,
      comparisons,
    })
    if (history.delivery === `held`) {
      const starts = beforeRelease.filter(
        (observation) =&gt; observation.type === `source-start`,
      )
      if (history.browserPreload) {
        expect(
          starts.some((start) =&gt; !start.inRender),
          `the authored preload starts its source outside render`,
        ).toBe(true)
        const localVersion = beforeRelease.find(
          (observation) =&gt; observation.type === `preload-settled`,
        )?.version
        const serverVersion = browser.find(
          (observation) =&gt;
            observation.type === `db-hydrate` &amp;&amp;
            observation.version !== undefined,
        )?.version
        expect(
          localVersion,
          `local preload settled with a newer version before record delivery`,
        ).toBeGreaterThan(serverVersion!)
      }
      const allBytes = server.chunks.map((chunk) =&gt; chunk.text).join(``)
      expect(allBytes.indexOf(`/client.js`)).toBeLessThan(
        allBytes.indexOf(`queryHash`),
      )
      expect(allBytes.indexOf(`data-reader`)).toBeLessThan(
        allBytes.indexOf(`queryHash`),
      )
    }
    expect(
      ssrStreamHydrationMismatches(comparisons),
      `shared per-reader stream refinement`,
    ).toEqual([])
    expect(
      browser.filter((observation) =&gt; observation.type === `recoverable-error`),
    ).toEqual([])
    if (history.delivery === `held`) {
      expect(
        beforeRelease.filter((observation) =&gt; observation.type === `view`),
        `hydration waits for its server record before returning a view`,
      ).toEqual([])
    }
  })
}

for (const transport of [`empty-close`, `empty-error`] as const) {
  test(`settles an absent record on ${transport}`, async ({
    page,
    request,
  }, testInfo) =&gt; {
    const id = String(++sequence)
    const history: HostHistory = { ...baseHistory, transport }
    await page.goto(
      `${origin}/?id=${id}&amp;history=${encodeURIComponent(JSON.stringify(history))}`,
      { waitUntil: `commit` },
    )
    await page.waitForFunction(() =&gt;
      window.streamViews?.some((observation) =&gt; observation.type === `attempt`),
    )
    const beforeRelease = await page.evaluate(() =&gt; window.streamViews ?? [])
    await request.post(`${origin}/release?id=${id}`)
    try {
      await expect(page.locator(`[data-stream-error]`)).toBeVisible()
    } finally {
      await attachJson(testInfo, `stream-terminal-observations`, {
        history,
        beforeRelease,
        browser: await page.evaluate(() =&gt; window.streamViews ?? []),
      })
    }
    const expectedMessage =
      transport === `empty-close`
        ? `Error: The DB stream ended before the server-rendered query snapshot arrived.`
        : `Error: stream transport failed`
    await expect
      .poll(async () =&gt;
        (await page.evaluate(() =&gt; window.streamViews ?? []))
          .filter((observation) =&gt; observation.type === `boundary-error`)
          .map((observation) =&gt; observation.message),
      )
      .toContain(expectedMessage)
    const browser = await page.evaluate(() =&gt; window.streamViews ?? [])
    expect(
      browser.filter((observation) =&gt; observation.type === `view`),
      `missing required server view cannot become browser success`,
    ).toEqual([])
    const terminal = browser.find(
      (observation) =&gt; observation.type === `stream-ended`,
    )
    expect(terminal, `the transport supplied its terminal signal`).toBeDefined()
    expect(
      browser.filter(
        (observation) =&gt;
          observation.type === `source-start` &amp;&amp; observation.at &gt; terminal!.at,
      ),
      `terminal failure cannot start new acquisition`,
    ).toEqual([])
  })
}

test(`keeps a known pending result alive after its DB stream closes`, async ({
  page,
  request,
}, testInfo) =&gt; {
  const id = String(++sequence)
  const history: HostHistory = { ...baseHistory, transport: `pending-close` }
  await page.goto(
    `${origin}/?id=${id}&amp;history=${encodeURIComponent(JSON.stringify(history))}`,
    { waitUntil: `commit` },
  )
  await page.waitForFunction(
    () =&gt;
      window.streamViews?.some(
        (observation) =&gt;
          observation.type === `db-hydrate` &amp;&amp; observation.pending,
      ) &amp;&amp; !window.streamFixture.client._isSsrStreamingEnabled(),
  )
  await page.evaluate(async () =&gt; {
    void window.streamFixture.prepareBrowser().catch(() =&gt; {})
    await window.streamFixture.prepareBrowserSource()
  })
  await page.waitForFunction(() =&gt;
    window.streamViews?.some(
      (observation) =&gt; observation.type === `source-start`,
    ),
  )
  const beforeRelease = await page.evaluate(() =&gt; window.streamViews ?? [])
  await attachJson(testInfo, `pending-before-release`, {
    history,
    beforeRelease,
  })
  expect(
    beforeRelease.some((observation) =&gt; observation.type === `source-start`),
  ).toBe(true)
  expect(
    beforeRelease.some(
      (observation) =&gt;
        observation.type === `result-settled` ||
        observation.type === `preload-settled` ||
        observation.type === `preload-rejected`,
    ),
    `the known server result remains pending during local source acquisition`,
  ).toBe(false)
  expect(
    beforeRelease.filter(
      (observation) =&gt; observation.type === `result-rejected`,
    ),
  ).toEqual([])
  await request.post(`${origin}/release?id=${id}`)
  await page.waitForFunction(() =&gt;
    window.streamViews?.some(
      (observation) =&gt;
        observation.type === `view` || observation.type === `boundary-error`,
    ),
  )
  const browser = await page.evaluate(() =&gt; window.streamViews ?? [])
  const server = (await (
    await request.get(`${origin}/observations?id=${id}`)
  ).json()) as { observations: Array&lt;HostObservation&gt; }
  const comparisons = [...firstViews(server.observations)].map(
    ([reader, view]) =&gt; ({
      reader,
      server: view,
      hydration: firstViews(browser).get(reader),
    }),
  )
  await attachJson(testInfo, `pending-result-observations`, {
    history,
    beforeRelease,
    server,
    browser,
  })
  expect(ssrStreamHydrationMismatches(comparisons)).toEqual([])
  expect(
    browser.filter(
      (observation) =&gt;
        observation.type === `result-rejected` ||
        observation.type === `recoverable-error`,
    ),
  ).toEqual([])
})
">
<input type="hidden" name="project[files][e2e/ssr-db.spec.ts]" value="import { expect, test } from &#39;@playwright/test&#39;

test(`TanStack Start hydrates, reconciles, and incrementally applies DB rows`, async ({
  page,
  request,
}) =&gt; {
  const response = await request.get(`/ssr-db`)
  expect(response.ok()).toBe(true)

  const html = await response.text()
  expect(html).toContain(`Pay invoices`)
  expect(html).not.toContain(`Pay invoices (reconciled from sync)`)
  expect(html).toContain(`Review pull requests`)
  expect(html).toContain(`ssr`)
  expect(html).not.toContain(`Streamed from collection chunk`)

  const browserErrors: Array&lt;string&gt; = []
  page.on(`console`, (message) =&gt; {
    if (message.type() === `error`) {
      browserErrors.push(message.text())
    }
  })
  page.on(`pageerror`, (error) =&gt; {
    browserErrors.push(error.message)
  })

  await page.goto(`/ssr-db`)

  await expect(page.getByTestId(`hydration-state`)).toHaveText(`hydrated`)
  await expect(page.getByTestId(`ready-state`)).toHaveText(`ready`)
  await expect(page.getByTestId(`streamed-status`)).toHaveText(`waiting`)
  await expect(page.getByTestId(`ssr-row-count`)).toHaveText(`2`)
  await expect(page.getByTestId(`ssr-todo-list`)).toContainText(
    `Pay invoices (reconciled from sync)`,
  )
  await expect(page.getByTestId(`ssr-todo-server-1`)).toContainText(`(sync)`)
  await expect(page.getByTestId(`ssr-todo-list`)).toContainText(
    `Review pull requests`,
  )
  await expect(page.getByTestId(`ssr-todo-list`)).not.toContainText(
    `Archived roadmap`,
  )

  await page.getByTestId(`apply-stream-chunk`).click()

  await expect(page.getByTestId(`streamed-status`)).toHaveText(`streamed`)
  await expect(page.getByTestId(`ssr-row-count`)).toHaveText(`3`)
  await expect(page.getByTestId(`ssr-todo-streamed-1`)).toBeVisible()
  await expect(page.getByTestId(`ssr-todo-streamed-1`)).toContainText(
    `Streamed from collection chunk`,
  )
  expect(browserErrors).toEqual([])
})

test(`TanStack Start streams a DB result snapshot and hands off to browser sync`, async ({
  page,
  request,
}) =&gt; {
  const response = await request.get(`/ssr-db-stream`)
  expect(response.ok()).toBe(true)
  const html = await response.text()
  expect(html).toContain(`Streamed while rendering`)
  expect(html).not.toContain(`SOURCE_ONLY_DO_NOT_TRANSPORT`)

  const browserErrors: Array&lt;string&gt; = []
  page.on(`console`, (message) =&gt; {
    if (message.type() === `error`) {
      browserErrors.push(message.text())
    }
  })
  page.on(`pageerror`, (error) =&gt; {
    browserErrors.push(error.message)
  })

  await page.goto(`/ssr-db-stream`, { waitUntil: `commit` })

  await expect(page.getByTestId(`critical-todo-server-1`)).toContainText(
    `Pay invoices`,
  )
  await expect(page.getByTestId(`stream-fallback`)).toBeVisible()
  await expect(page.getByTestId(`streamed-todo-list`)).not.toBeVisible()
  await expect(page.getByTestId(`streamed-todo-streamed-server-1`)).toHaveText(
    `Streamed while rendering`,
  )
  await expect(page.getByTestId(`stream-fallback`)).not.toBeVisible()
  await expect(
    page.getByTestId(`streamed-todo-streamed-server-1`),
  ).not.toBeVisible()
  await expect(page.getByTestId(`streamed-todo-streamed-browser-1`)).toHaveText(
    `Reconciled from browser sync`,
  )
  expect(browserErrors).toEqual([])
})
">
<input type="hidden" name="project[files][src/main.tsx]" value="import { StrictMode } from &#39;react&#39;
import { createRoot } from &#39;react-dom/client&#39;
import { RouterProvider } from &#39;@tanstack/react-router&#39;
import { getRouter } from &#39;./router&#39;

const router = getRouter()

createRoot(document.getElementById(`root`)!).render(
  &lt;StrictMode&gt;
    &lt;RouterProvider router={router} /&gt;
  &lt;/StrictMode&gt;,
)
">
<input type="hidden" name="project[files][src/routeTree.gen.ts]" value="/* eslint-disable */

// @ts-nocheck

// noinspection JSUnusedGlobalSymbols

// This file was automatically generated by TanStack Router.
// You should NOT make any changes in this file as it will be overwritten.
// Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.

import { Route as rootRouteImport } from &#39;./routes/__root&#39;
import { Route as IndexRouteImport } from &#39;./routes/index&#39;
import { Route as SsrDbRouteImport } from &#39;./routes/ssr-db&#39;
import { Route as SsrDbStreamRouteImport } from &#39;./routes/ssr-db-stream&#39;

const IndexRoute = IndexRouteImport.update({
  id: &#39;/&#39;,
  path: &#39;/&#39;,
  getParentRoute: () =&gt; rootRouteImport,
} as any)
const SsrDbRoute = SsrDbRouteImport.update({
  id: &#39;/ssr-db&#39;,
  path: &#39;/ssr-db&#39;,
  getParentRoute: () =&gt; rootRouteImport,
} as any)
const SsrDbStreamRoute = SsrDbStreamRouteImport.update({
  id: &#39;/ssr-db-stream&#39;,
  path: &#39;/ssr-db-stream&#39;,
  getParentRoute: () =&gt; rootRouteImport,
} as any)

export interface FileRoutesByFullPath {
  &#39;/&#39;: typeof IndexRoute
  &#39;/ssr-db&#39;: typeof SsrDbRoute
  &#39;/ssr-db-stream&#39;: typeof SsrDbStreamRoute
}
export interface FileRoutesByTo {
  &#39;/&#39;: typeof IndexRoute
  &#39;/ssr-db&#39;: typeof SsrDbRoute
  &#39;/ssr-db-stream&#39;: typeof SsrDbStreamRoute
}
export interface FileRoutesById {
  __root__: typeof rootRouteImport
  &#39;/&#39;: typeof IndexRoute
  &#39;/ssr-db&#39;: typeof SsrDbRoute
  &#39;/ssr-db-stream&#39;: typeof SsrDbStreamRoute
}
export interface FileRouteTypes {
  fileRoutesByFullPath: FileRoutesByFullPath
  fullPaths: &#39;/&#39; | &#39;/ssr-db&#39; | &#39;/ssr-db-stream&#39;
  fileRoutesByTo: FileRoutesByTo
  to: &#39;/&#39; | &#39;/ssr-db&#39; | &#39;/ssr-db-stream&#39;
  id: &#39;__root__&#39; | &#39;/&#39; | &#39;/ssr-db&#39; | &#39;/ssr-db-stream&#39;
  fileRoutesById: FileRoutesById
}
export interface RootRouteChildren {
  IndexRoute: typeof IndexRoute
  SsrDbRoute: typeof SsrDbRoute
  SsrDbStreamRoute: typeof SsrDbStreamRoute
}

declare module &#39;@tanstack/react-router&#39; {
  interface FileRoutesByPath {
    &#39;/&#39;: {
      id: &#39;/&#39;
      path: &#39;/&#39;
      fullPath: &#39;/&#39;
      preLoaderRoute: typeof IndexRouteImport
      parentRoute: typeof rootRouteImport
    }
    &#39;/ssr-db&#39;: {
      id: &#39;/ssr-db&#39;
      path: &#39;/ssr-db&#39;
      fullPath: &#39;/ssr-db&#39;
      preLoaderRoute: typeof SsrDbRouteImport
      parentRoute: typeof rootRouteImport
    }
    &#39;/ssr-db-stream&#39;: {
      id: &#39;/ssr-db-stream&#39;
      path: &#39;/ssr-db-stream&#39;
      fullPath: &#39;/ssr-db-stream&#39;
      preLoaderRoute: typeof SsrDbStreamRouteImport
      parentRoute: typeof rootRouteImport
    }
  }
}

const rootRouteChildren: RootRouteChildren = {
  IndexRoute: IndexRoute,
  SsrDbRoute: SsrDbRoute,
  SsrDbStreamRoute: SsrDbStreamRoute,
}
export const routeTree = rootRouteImport
  ._addFileChildren(rootRouteChildren)
  ._addFileTypes&lt;FileRouteTypes&gt;()

import type { getRouter } from &#39;./router.tsx&#39;
import type { startInstance } from &#39;./start.tsx&#39;
declare module &#39;@tanstack/react-start&#39; {
  interface Register {
    ssr: true
    router: Awaited&lt;ReturnType&lt;typeof getRouter&gt;&gt;
    config: Awaited&lt;ReturnType&lt;typeof startInstance.getOptions&gt;&gt;
  }
}
">
<input type="hidden" name="project[files][src/router.tsx]" value="import { createRouter as createTanstackRouter } from &#39;@tanstack/react-router&#39;
import { createIsomorphicFn } from &#39;@tanstack/react-start&#39;
import { DbClient } from &#39;@tanstack/react-db&#39;
import { routerWithDbClient } from &#39;@tanstack/react-router-with-db&#39;
import { routeTree } from &#39;./routeTree.gen&#39;
import &#39;./styles.css&#39;

export type RouterContext = {
  dbClient: DbClient
}

const getRuntime = createIsomorphicFn()
  .server(() =&gt; `server` as const)
  .client(() =&gt; `browser` as const)

export function getRouter() {
  const dbClient = new DbClient({
    runtime: getRuntime(),
  })
  const router = createTanstackRouter({
    routeTree,
    context: { dbClient },
    scrollRestoration: true,
  })

  return routerWithDbClient(router, dbClient)
}
">
<input type="hidden" name="project[files][src/start.tsx]" value="import { createStart } from &#39;@tanstack/react-start&#39;

export const startInstance = createStart(() =&gt; {
  return {
    defaultSsr: true,
  }
})
">
<input type="hidden" name="project[files][src/styles.css]" value="body {
  margin: 0;
  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    &#39;Segoe UI&#39;,
    sans-serif;
}

button {
  font: inherit;
}
">
<input type="hidden" name="project[files][e2e/router-stream-driver/client.tsx]" value="import { hydrateRoot } from &#39;react-dom/client&#39;
import { RouterClient } from &#39;@tanstack/react-router/ssr/client&#39;
import { makeFixture } from &#39;./fixture&#39;
import type { HostHistory, HostObservation } from &#39;./fixture&#39;

const history = JSON.parse(
  new URL(location.href).searchParams.get(`history`)!,
) as HostHistory
const observations: Array&lt;HostObservation&gt; = [
  { type: `entry`, at: performance.now() },
]
window.streamViews = observations
const fixture = makeFixture(`browser`, history, (observation) =&gt;
  observations.push(observation),
)
window.streamFixture = fixture
if (history.browserPreload) {
  const hydrate = fixture.router.options.hydrate!
  fixture.router.options.hydrate = async (state) =&gt; {
    await hydrate(state)
    await fixture.prepareBrowser()
  }
}
hydrateRoot(document, &lt;RouterClient router={fixture.router} /&gt;, {
  onRecoverableError(error) {
    observations.push({
      type: `recoverable-error`,
      message: String(error),
      at: performance.now(),
    })
  },
})
">
<input type="hidden" name="project[files][e2e/router-stream-driver/fixture.tsx]" value="import * as React from &#39;react&#39;
import {
  Scripts,
  createMemoryHistory,
  createRootRouteWithContext,
  createRouter,
} from &#39;@tanstack/react-router&#39;
import {
  DbClient,
  Query,
  collectionOptions,
  useLiveQuery,
  useLiveSuspenseQuery,
} from &#39;@tanstack/react-db&#39;
import { routerWithDbClient } from &#39;@tanstack/react-router-with-db&#39;
import type {
  SsrStreamHistory,
  SsrStreamReaderView,
} from &#39;../../../../../packages/db/tests/ssr-stream-view-oracle&#39;

export type HostHistory = SsrStreamHistory &amp; {
  browserPreload?: boolean
  discovery: `shell` | `boundary`
  delivery: `normal` | `held`
  transport: `owned` | `empty-close` | `empty-error` | `pending-close`
}
export type HostObservation = {
  type: string
  reader?: string
  view?: SsrStreamReaderView
  inRender?: boolean
  pending?: boolean
  message?: string
  version?: number
  at: number
}
declare global {
  interface Window {
    streamViews?: Array&lt;HostObservation&gt;
    streamFixture: {
      client: DbClient
      prepareBrowser: () =&gt; Promise&lt;number | undefined&gt;
      prepareBrowserSource: () =&gt; Promise&lt;void&gt;
    }
  }
}

/**
 * This fixture supplies host scheduling to the shared per-reader law. Server
 * and browser sources differ by authored input. Observations come from actual
 * hook returns; DB records never compute either side of the expected equality.
 */
export function makeFixture(
  runtime: `server` | `browser`,
  history: HostHistory,
  observe: (observation: HostObservation) =&gt; void,
  release: Promise&lt;void&gt; = Promise.resolve(),
) {
  let renderDepth = 0
  let gateReady = false
  let gate: Promise&lt;void&gt; | undefined
  const now = () =&gt;
    typeof window === `undefined` ? Date.now() : performance.now()
  const client = new DbClient({ runtime })
  const source = collectionOptions(`router-stream-view`, () =&gt; ({
    id: `router-stream-view`,
    getKey: (row: { id: string; name: string }) =&gt; row.id,
    sync: {
      sync: ({ begin, write, commit, markReady }) =&gt; {
        observe({ type: `source-start`, inRender: renderDepth &gt; 0, at: now() })
        const publish = () =&gt; {
          begin()
          for (let index = 0; index &lt; history.count; index++) {
            write({
              type: `insert`,
              value: {
                id: String(index),
                name: `${runtime === `server` || !history.browserWrite ? `server` : `browser`} ${index}`,
              },
            })
          }
          commit()
          markReady()
        }
        if (runtime === `server` &amp;&amp; history.transport === `pending-close`) {
          void release.then(publish)
        } else publish()
      },
    },
  }))
  const query = new Query()
    .from({ row: source })
    .select(({ row }) =&gt; ({ name: row.name }))
  const record = (reader: string, view: SsrStreamReaderView) =&gt; {
    observe({ type: `view`, reader, view, at: now() })
    return (
      &lt;output data-reader={reader} data-status={view.status}&gt;
        {view.names.join(`,`)}
      &lt;/output&gt;
    )
  }
  function Ordinary() {
    observe({ type: `attempt`, reader: `ordinary`, at: now() })
    renderDepth++
    try {
      const result = useLiveQuery({ query })
      return record(`ordinary`, {
        status: result.status,
        names: result.data.map((row) =&gt; row.name),
      })
    } finally {
      renderDepth--
    }
  }
  function SuspenseReader() {
    observe({ type: `attempt`, reader: `suspense`, at: now() })
    renderDepth++
    try {
      const result = useLiveSuspenseQuery({ query })
      return record(`suspense`, {
        status: `ready`,
        names: result.data.map((row) =&gt; row.name),
      })
    } finally {
      renderDepth--
    }
  }
  function Readers() {
    return (
      &lt;&gt;
        {history.ordinaryFirst &amp;&amp; &lt;Ordinary /&gt;}
        &lt;SuspenseReader /&gt;
        {history.ordinaryLast &amp;&amp; &lt;Ordinary /&gt;}
      &lt;/&gt;
    )
  }
  function Gate() {
    if (
      runtime === `server` &amp;&amp;
      history.discovery === `boundary` &amp;&amp;
      !gateReady
    ) {
      gate ??= new Promise&lt;void&gt;((resolve) =&gt;
        setTimeout(() =&gt; {
          gateReady = true
          resolve()
        }, 150),
      )
      throw gate
    }
    return &lt;Readers /&gt;
  }
  class FailureBoundary extends React.Component&lt;
    { children: React.ReactNode },
    { failed: boolean }
  &gt; {
    state = { failed: false }
    static getDerivedStateFromError() {
      return { failed: true }
    }
    componentDidCatch(error: unknown) {
      observe({ type: `boundary-error`, message: String(error), at: now() })
    }
    render() {
      return this.state.failed ? (
        &lt;b data-stream-error&gt;stream failed&lt;/b&gt;
      ) : (
        this.props.children
      )
    }
  }
  function Document() {
    return (
      &lt;html&gt;
        &lt;head&gt;
          &lt;title&gt;Router stream view&lt;/title&gt;
        &lt;/head&gt;
        &lt;body&gt;
          &lt;FailureBoundary&gt;
            &lt;React.Suspense fallback={&lt;i data-stream-fallback&gt;waiting&lt;/i&gt;}&gt;
              &lt;Gate /&gt;
            &lt;/React.Suspense&gt;
          &lt;/FailureBoundary&gt;
          &lt;Scripts /&gt;
        &lt;/body&gt;
      &lt;/html&gt;
    )
  }
  const routeTree = createRootRouteWithContext&lt;{ dbClient: DbClient }&gt;()({
    component: Document,
  })
  const router = createRouter({
    routeTree,
    context: { dbClient: client },
    ...(runtime === `server`
      ? {
          history: createMemoryHistory({ initialEntries: [`/`] }),
          isServer: true,
        }
      : {}),
  })
  if (runtime === `browser`) {
    const setStreaming = client._setSsrStreamingEnabled.bind(client)
    client._setSsrStreamingEnabled = (enabled) =&gt; {
      setStreaming(enabled)
      if (!enabled) observe({ type: `stream-ended`, at: now() })
    }
    const hydrate = client.hydrate.bind(client)
    client.hydrate = (state) =&gt; {
      observe({
        type: `db-hydrate`,
        version: state.liveQueries?.[0]?.dehydratedAt,
        pending: state.liveQueries?.some((transported) =&gt;
          Boolean(transported.promise &amp;&amp; !transported.snapshot),
        ),
        at: now(),
      })
      for (const transported of state.liveQueries ?? []) {
        void transported.promise?.then(
          () =&gt; observe({ type: `result-settled`, at: now() }),
          (error) =&gt;
            observe({
              type: `result-rejected`,
              message: String(error),
              at: now(),
            }),
        )
      }
      hydrate(state)
    }
  }
  return {
    client,
    router: routerWithDbClient(router, client),
    async prepareBrowser() {
      observe({ type: `preload-start`, at: now() })
      try {
        await client.preloadLiveQuery({ query })
        const version = client.dehydrate({
          shouldDehydrateCollection: () =&gt; false,
        }).liveQueries?.[0]?.dehydratedAt
        observe({ type: `preload-settled`, version, at: now() })
        return version
      } catch (error) {
        observe({ type: `preload-rejected`, message: String(error), at: now() })
        throw error
      }
    },
    async prepareBrowserSource() {
      await client.collection(source).preload()
    },
    async prepareServer() {
      if (history.ordinaryFirst || history.ordinaryLast)
        await client.collection(source).preload()
    },
  }
}
">
<input type="hidden" name="project[files][e2e/router-stream-driver/server.tsx]" value="import { createServer } from &#39;node:http&#39;
import { readFile } from &#39;node:fs/promises&#39;
import {
  RouterServer,
  attachRouterServerSsrUtils,
  renderRouterToStream,
} from &#39;@tanstack/react-router/ssr/server&#39;
import { makeFixture } from &#39;./fixture&#39;
import type { DehydratedDbState } from &#39;@tanstack/react-db&#39;
import type { HostHistory, HostObservation } from &#39;./fixture&#39;

const output = process.env.ROUTER_STREAM_OUTPUT!
const sessions = new Map&lt;
  string,
  {
    release: () =&gt; void
    observations: Array&lt;HostObservation&gt;
    chunks: Array&lt;{ index: number; text: string; at: number }&gt;
    waiting: boolean
  }
&gt;()
const server = createServer(async (request, response) =&gt; {
  const url = new URL(request.url!, `http://localhost`)
  const id = url.searchParams.get(`id`) ?? `default`
  if (url.pathname === `/client.js`) {
    response.setHeader(`content-type`, `text/javascript`)
    response.end(await readFile(`${output}/client.js`))
    return
  }
  if (url.pathname === `/release`) {
    sessions.get(id)?.release()
    response.end(`released`)
    return
  }
  if (url.pathname === `/observations`) {
    const session = sessions.get(id)
    response.setHeader(`content-type`, `application/json`)
    response.end(
      JSON.stringify(
        session &amp;&amp; {
          observations: session.observations,
          chunks: session.chunks,
          waiting: session.waiting,
        },
      ),
    )
    return
  }
  if (url.pathname !== `/`) {
    response.end()
    return
  }
  try {
    const history = JSON.parse(url.searchParams.get(`history`)!) as HostHistory
    let release!: () =&gt; void
    const released = new Promise&lt;void&gt;((resolve) =&gt; {
      release = resolve
    })
    const session = {
      release,
      observations: [] as Array&lt;HostObservation&gt;,
      chunks: [] as Array&lt;{ index: number; text: string; at: number }&gt;,
      waiting: false,
    }
    sessions.set(id, session)
    const fixture = makeFixture(
      `server`,
      history,
      (observation) =&gt; session.observations.push(observation),
      released,
    )
    attachRouterServerSsrUtils({
      router: fixture.router,
      manifest: {
        routes: {
          __root__: {
            scripts: [
              { attrs: { type: `module`, async: true, src: `/client.js` } },
            ],
          },
        },
      },
    })
    await fixture.prepareServer()
    if (history.transport !== `owned`) {
      const dehydrate = fixture.router.options.dehydrate!
      fixture.router.options.dehydrate = async () =&gt; {
        const state = await dehydrate()
        const dbStream = new ReadableStream&lt;DehydratedDbState&gt;({
          async start(controller) {
            if (history.transport === `pending-close`) {
              const reader = state.dbStream.getReader()
              const entry = await reader.read()
              if (!entry.done) controller.enqueue(entry.value)
              reader.releaseLock()
              controller.close()
            } else {
              await released
              if (history.transport === `empty-error`)
                controller.error(new Error(`stream transport failed`))
              else controller.close()
            }
          },
        })
        return { ...state, dbStream }
      }
    }
    await fixture.router.load()
    await fixture.router.serverSsr!.dehydrate()
    const rendered = await renderRouterToStream({
      request: new Request(`http://localhost/`, {
        headers: {
          &#39;User-Agent&#39;: `Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/140.0.0.0 Safari/537.36`,
        },
      }),
      router: fixture.router,
      responseHeaders: new Headers({ &#39;content-type&#39;: `text/html` }),
      children: &lt;RouterServer router={fixture.router} /&gt;,
    })
    response.writeHead(200, {
      &#39;content-type&#39;: `text/html`,
      &#39;cache-control&#39;: `no-store`,
    })
    const reader = rendered.response.body!.getReader()
    let held = false
    for (;;) {
      const entry = await reader.read()
      if (entry.done) break
      const text = new TextDecoder().decode(entry.value)
      // Only the HTTP sink waits. Serializer records and HTML retain their
      // original order, including every byte following the held record.
      if (!held &amp;&amp; history.delivery === `held` &amp;&amp; text.includes(`queryHash`)) {
        held = true
        session.waiting = true
        await released
        session.waiting = false
      }
      session.chunks.push({
        index: session.chunks.length,
        text,
        at: Date.now(),
      })
      response.write(entry.value)
    }
    response.end()
  } catch (error) {
    console.error(error)
    response.end(String(error))
  }
})
server.listen(0, `127.0.0.1`, () =&gt; {
  const address = server.address()
  if (address &amp;&amp; typeof address === `object`)
    console.info(JSON.stringify({ port: address.port }))
})
">
<input type="hidden" name="project[files][netlify/functions/server.mjs]" value="import server from &#39;../../dist/server/server.js&#39;

export const config = {
  path: &#39;/*&#39;,
  preferStatic: true,
}

export default function handler(request) {
  return server.fetch(request)
}
">
<input type="hidden" name="project[files][src/lib/ssr-fixture.ts]" value="import { DbClient, collectionOptions, eq } from &#39;@tanstack/react-db&#39;
import type { DehydratedDbState } from &#39;@tanstack/react-db&#39;

export type SsrTodo = {
  id: string
  text: string
  status: `open` | `done`
  source: `server` | `sync` | `stream`
}

export const ssrTodoCollectionId = `ssr-e2e-todos`

const serverTodos: Array&lt;SsrTodo&gt; = [
  {
    id: `server-1`,
    text: `Pay invoices`,
    status: `open`,
    source: `server`,
  },
  {
    id: `server-2`,
    text: `Review pull requests`,
    status: `open`,
    source: `server`,
  },
  {
    id: `server-3`,
    text: `Archived roadmap`,
    status: `done`,
    source: `server`,
  },
]

const browserTodos: Array&lt;SsrTodo&gt; = serverTodos.map((todo) =&gt;
  todo.id === `server-1`
    ? {
        ...todo,
        text: `Pay invoices (reconciled from sync)`,
        source: `sync`,
      }
    : { ...todo, source: `sync` },
)

export const streamedTodo: SsrTodo = {
  id: `streamed-1`,
  text: `Streamed from collection chunk`,
  status: `open`,
  source: `stream`,
}

export const ssrTodoCollection = collectionOptions(ssrTodoCollectionId, () =&gt; ({
  id: ssrTodoCollectionId,
  getKey: (todo: SsrTodo) =&gt; todo.id,
  syncMode: `on-demand`,
  sync: {
    sync: ({ begin, write, commit, markReady }) =&gt; {
      markReady()

      return {
        loadSubset: () =&gt; {
          const todos =
            typeof window === `undefined` ? serverTodos : browserTodos

          begin()
          for (const todo of todos) {
            write({
              type: `insert`,
              value: todo,
            })
          }
          return commit()
        },
      }
    },
  },
}))

export async function preloadSsrTodos(dbClient: DbClient): Promise&lt;void&gt; {
  await dbClient.preloadLiveQuery({
    query: (q) =&gt;
      q
        .from({ todo: ssrTodoCollection })
        .where(({ todo }) =&gt; eq(todo.status, `open`)),
  })
}

export async function createDehydratedSsrTodoState(): Promise&lt;DehydratedDbState&gt; {
  const dbClient = new DbClient()
  try {
    await preloadSsrTodos(dbClient)
    return dbClient.dehydrate()
  } finally {
    await dbClient.cleanup()
  }
}

export function applyStreamedTodo(dbClient: DbClient): void {
  dbClient.applyCollectionChunk({
    collectionId: ssrTodoCollectionId,
    rows: [
      {
        key: streamedTodo.id,
        value: streamedTodo,
      },
    ],
  })
}
">
<input type="hidden" name="project[files][src/routes/__root.tsx]" value="import * as React from &#39;react&#39;
import {
  HeadContent,
  Outlet,
  Scripts,
  createRootRouteWithContext,
} from &#39;@tanstack/react-router&#39;
import appCss from &#39;../styles.css?url&#39;
import type { RouterContext } from &#39;../router&#39;

export const Route = createRootRouteWithContext&lt;RouterContext&gt;()({
  head: () =&gt; ({
    meta: [
      {
        charSet: `utf-8`,
      },
      {
        name: `viewport`,
        content: `width=device-width, initial-scale=1`,
      },
      {
        title: `TanStack DB Start SSR E2E`,
      },
    ],
    links: [
      {
        rel: `stylesheet`,
        href: appCss,
      },
    ],
  }),
  shellComponent: RootDocument,
  component: () =&gt; &lt;Outlet /&gt;,
})

function RootDocument({ children }: { children: React.ReactNode }) {
  return (
    &lt;html lang=&quot;en&quot;&gt;
      &lt;head&gt;
        &lt;HeadContent /&gt;
      &lt;/head&gt;
      &lt;body&gt;
        {children}
        &lt;Scripts /&gt;
      &lt;/body&gt;
    &lt;/html&gt;
  )
}
">
<input type="hidden" name="project[files][src/routes/index.tsx]" value="import { Link, createFileRoute } from &#39;@tanstack/react-router&#39;

export const Route = createFileRoute(`/`)({
  component: HomePage,
})

function HomePage() {
  return (
    &lt;main style={{ padding: 32 }}&gt;
      &lt;h1&gt;TanStack DB Start SSR E2E&lt;/h1&gt;
      &lt;Link to=&quot;/ssr-db&quot;&gt;Open SSR DB route&lt;/Link&gt;
    &lt;/main&gt;
  )
}
">
<input type="hidden" name="project[files][src/routes/ssr-db-stream.tsx]" value="import * as React from &#39;react&#39;
import { createFileRoute } from &#39;@tanstack/react-router&#39;
import {
  collectionOptions,
  eq,
  useLiveQuery,
  useLiveSuspenseQuery,
} from &#39;@tanstack/react-db&#39;
import { preloadSsrTodos, ssrTodoCollection } from &#39;../lib/ssr-fixture&#39;

type StreamedTodo = {
  id: string
  text: string
  status: `open` | `done`
  sourcePayload: string
}

const serverTodo: StreamedTodo = {
  id: `streamed-server-1`,
  text: `Streamed while rendering`,
  status: `open`,
  sourcePayload: `SOURCE_ONLY_DO_NOT_TRANSPORT`,
}

const browserTodo: StreamedTodo = {
  id: `streamed-browser-1`,
  text: `Reconciled from browser sync`,
  status: `open`,
  sourcePayload: `BROWSER_SOURCE_ONLY_DO_NOT_TRANSPORT`,
}

const streamedTodoCollection = collectionOptions(
  `ssr-suspense-stream-todos`,
  (client) =&gt; {
    const runtime = client.requireDependency&lt;`server` | `browser`&gt;(`runtime`)

    return {
      id: `ssr-suspense-stream-todos`,
      getKey: (todo: StreamedTodo) =&gt; todo.id,
      syncMode: `on-demand` as const,
      sync: {
        sync: ({ begin, write, commit, markReady }) =&gt; {
          markReady()

          return {
            loadSubset: () =&gt; {
              return new Promise&lt;void&gt;((resolve) =&gt; {
                setTimeout(
                  () =&gt; {
                    begin()
                    write({
                      type: `insert`,
                      value: runtime === `server` ? serverTodo : browserTodo,
                    })
                    commit()
                    resolve()
                  },
                  runtime === `server` ? 1000 : 1500,
                )
              })
            },
          }
        },
      },
    }
  },
)

export const Route = createFileRoute(`/ssr-db-stream`)({
  loader: async ({ context }) =&gt; {
    await preloadSsrTodos(context.dbClient)
  },
  component: SsrDbStreamRoute,
})

function SsrDbStreamRoute() {
  return (
    &lt;main data-testid=&quot;ssr-db-stream-page&quot;&gt;
      &lt;h1&gt;TanStack DB Suspense Streaming&lt;/h1&gt;
      &lt;CriticalTodoList /&gt;
      &lt;React.Suspense
        fallback={&lt;p data-testid=&quot;stream-fallback&quot;&gt;Loading todos&lt;/p&gt;}
      &gt;
        &lt;StreamedTodoList /&gt;
      &lt;/React.Suspense&gt;
    &lt;/main&gt;
  )
}

function CriticalTodoList() {
  const { data: todos } = useLiveQuery({
    query: (q) =&gt;
      q
        .from({ todo: ssrTodoCollection })
        .where(({ todo }) =&gt; eq(todo.status, `open`)),
  })

  return (
    &lt;ul data-testid=&quot;critical-todo-list&quot;&gt;
      {todos.map((todo) =&gt; (
        &lt;li data-testid={`critical-todo-${todo.id}`} key={todo.id}&gt;
          {todo.text}
        &lt;/li&gt;
      ))}
    &lt;/ul&gt;
  )
}

function StreamedTodoList() {
  const { data: todos } = useLiveSuspenseQuery({
    query: (q) =&gt;
      q
        .from({ todo: streamedTodoCollection })
        .where(({ todo }) =&gt; eq(todo.status, `open`))
        .select(({ todo }) =&gt; ({
          id: todo.id,
          text: todo.text,
          status: todo.status,
        })),
  })

  return (
    &lt;ul data-testid=&quot;streamed-todo-list&quot;&gt;
      {todos.map((todo) =&gt; (
        &lt;li data-testid={`streamed-todo-${todo.id}`} key={todo.id}&gt;
          {todo.text}
        &lt;/li&gt;
      ))}
    &lt;/ul&gt;
  )
}
">
<input type="hidden" name="project[files][src/routes/ssr-db.tsx]" value="import * as React from &#39;react&#39;
import { createFileRoute } from &#39;@tanstack/react-router&#39;
import { eq, useLiveQuery } from &#39;@tanstack/react-db&#39;
import {
  applyStreamedTodo,
  createDehydratedSsrTodoState,
  ssrTodoCollection,
} from &#39;../lib/ssr-fixture&#39;
import type { DbClient } from &#39;@tanstack/react-db&#39;

export const Route = createFileRoute(`/ssr-db`)({
  loader: async () =&gt; {
    return {
      dbState: await createDehydratedSsrTodoState(),
    }
  },
  component: SsrDbRoute,
})

function SsrDbRoute() {
  const { dbState } = Route.useLoaderData()
  const { dbClient } = Route.useRouteContext()
  const [hydratedDbClient] = React.useState(() =&gt; {
    dbClient.hydrate(dbState)
    return dbClient
  })

  return &lt;SsrDbTodos dbClient={hydratedDbClient} /&gt;
}

function SsrDbTodos({ dbClient }: { dbClient: DbClient }) {
  const [hydrated, setHydrated] = React.useState(false)
  const [streamed, setStreamed] = React.useState(false)
  const { data: todos, isReady } = useLiveQuery({
    query: (q) =&gt;
      q
        .from({ todo: ssrTodoCollection })
        .where(({ todo }) =&gt; eq(todo.status, `open`))
        .orderBy(({ todo }) =&gt; todo.id, `asc`),
  })

  React.useEffect(() =&gt; {
    setHydrated(true)
  }, [])

  return (
    &lt;main
      data-testid=&quot;ssr-db-page&quot;
      style={{
        background: `#f8fafc`,
        minHeight: `100vh`,
        padding: 32,
      }}
    &gt;
      &lt;section
        style={{
          background: `white`,
          border: `1px solid #e5e7eb`,
          borderRadius: 8,
          margin: `0 auto`,
          maxWidth: 720,
          padding: 24,
        }}
      &gt;
        &lt;h1&gt;TanStack DB SSR&lt;/h1&gt;

        &lt;div style={{ display: `flex`, gap: 16, marginBottom: 16 }}&gt;
          &lt;span data-testid=&quot;hydration-state&quot;&gt;
            {hydrated ? `hydrated` : `ssr`}
          &lt;/span&gt;
          &lt;span data-testid=&quot;ready-state&quot;&gt;{isReady ? `ready` : `loading`}&lt;/span&gt;
          &lt;span data-testid=&quot;streamed-status&quot;&gt;
            {streamed ? `streamed` : `waiting`}
          &lt;/span&gt;
          &lt;span&gt;
            rows: &lt;strong data-testid=&quot;ssr-row-count&quot;&gt;{todos.length}&lt;/strong&gt;
          &lt;/span&gt;
        &lt;/div&gt;

        &lt;ul data-testid=&quot;ssr-todo-list&quot;&gt;
          {todos.map((todo) =&gt; (
            &lt;li data-testid={`ssr-todo-${todo.id}`} key={todo.id}&gt;
              {todo.text} &lt;small&gt;({todo.source})&lt;/small&gt;
            &lt;/li&gt;
          ))}
        &lt;/ul&gt;

        &lt;button
          data-testid=&quot;apply-stream-chunk&quot;
          onClick={() =&gt; {
            applyStreamedTodo(dbClient)
            setStreamed(true)
          }}
          style={{
            background: `#15803d`,
            border: 0,
            borderRadius: 6,
            color: `white`,
            cursor: `pointer`,
            marginTop: 16,
            padding: `10px 14px`,
          }}
          type=&quot;button&quot;
        &gt;
          Apply streamed chunk
        &lt;/button&gt;
      &lt;/section&gt;
    &lt;/main&gt;
  )
}
">
<input type="hidden" name="project[description]" value="generated by https://pkg.pr.new">
<input type="hidden" name="project[template]" value="node">
<input type="hidden" name="project[title]" value="@tanstack/db-example-react-start-ssr-e2e">
</form>
<script>document.getElementById("mainForm").submit();</script>

</body></html>