<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-next-ssr-e2e

## 0.0.6

### Patch Changes

- Updated dependencies [[`2806da0`](https://github.com/TanStack/db/commit/2806da0c41ba99ce6aeef70556a8ac2fd66e2295), [`7c516ce`](https://github.com/TanStack/db/commit/7c516ce025cdac8a986a5d11800b06ed554a1a64), [`e5a3d0e`](https://github.com/TanStack/db/commit/e5a3d0ef439a40709782768130952ef3ed6ac076), [`a022535`](https://github.com/TanStack/db/commit/a0225358ccaedd0a52c6e63dd4c0856505d8965a), [`eac6e8b`](https://github.com/TanStack/db/commit/eac6e8b6a6150b8e48bdbe61365bceec1e768eb1), [`a21f4a4`](https://github.com/TanStack/db/commit/a21f4a4d553514cd694051dfe74e64109c82b146), [`cfb03f2`](https://github.com/TanStack/db/commit/cfb03f201bb21d82b7f537a9fbe59d3623f395d6)]:
  - @tanstack/db@0.12.0
  - @tanstack/react-db@0.5.4

## 0.0.5

### Patch Changes

- Updated dependencies [[`9c62ac3`](https://github.com/TanStack/db/commit/9c62ac3782779dc2a91335dd834ad8eb907db109), [`d5e4732`](https://github.com/TanStack/db/commit/d5e47325a7db907fb2c5f9bb6d1273754bfc4a69), [`0122da8`](https://github.com/TanStack/db/commit/0122da80ae58d8e8e624b460506370a910037c8e), [`f7d96f7`](https://github.com/TanStack/db/commit/f7d96f7e22c8997bca0815521e8e944457c8888a), [`fb509ef`](https://github.com/TanStack/db/commit/fb509efb985f830736389d7ec2b53504c0611395), [`dc4b4e0`](https://github.com/TanStack/db/commit/dc4b4e089a5c5b4b9462fd833ff3c6e0c2f17988), [`f158258`](https://github.com/TanStack/db/commit/f15825858e09914b6b94c4150f77c5137efecdbf), [`c879ba6`](https://github.com/TanStack/db/commit/c879ba6d855914e5c0cac49af7a007eb5cabe7e4), [`b5d92ce`](https://github.com/TanStack/db/commit/b5d92cebd0d951d8a3399618aea4f399915b6ea9)]:
  - @tanstack/db@0.11.0
  - @tanstack/react-db@0.5.0

## 0.0.4

### Patch Changes

- Updated dependencies [[`2ad6834`](https://github.com/TanStack/db/commit/2ad6834af4b1ddf9d7c0c9c85e25ea8b1aac44e2), [`b528a61`](https://github.com/TanStack/db/commit/b528a610533a083ec909aeca354ff826d76e37e0), [`84fc44b`](https://github.com/TanStack/db/commit/84fc44b559c94139f28b3cec526ebfe05290b95e), [`9351f46`](https://github.com/TanStack/db/commit/9351f46d68853f4e3f5fa3c7e8c9455e798d0171), [`5108acf`](https://github.com/TanStack/db/commit/5108acf47a0724691a06af8a660014776f9cf716), [`afbeb44`](https://github.com/TanStack/db/commit/afbeb44eef48d92b6e30ae5fd2843b938ee9163c), [`2775082`](https://github.com/TanStack/db/commit/27750825e94acaf221c5a3e7a4ed4a735499e9fa), [`fef53f8`](https://github.com/TanStack/db/commit/fef53f8be7f1cb68f00639a4c3206a6598663de4), [`b44a50a`](https://github.com/TanStack/db/commit/b44a50ad8c1ffeced0749dd773dfdc8ca2db8f0a), [`19dd9a2`](https://github.com/TanStack/db/commit/19dd9a2fa580963f4605d3466674db6ec9d3e002), [`3096b8f`](https://github.com/TanStack/db/commit/3096b8f28b7baaa990ec6113175d684191a21954), [`1ab1cd3`](https://github.com/TanStack/db/commit/1ab1cd35d0549735a864e1cd9260f5b1374d8191), [`e5fe2ea`](https://github.com/TanStack/db/commit/e5fe2ea3597faa257d2c5f8cde6f5d17b8893f0f), [`3eb5b2b`](https://github.com/TanStack/db/commit/3eb5b2b387fed4051744ca4787c499e5f3d2f7b2), [`7c62bf5`](https://github.com/TanStack/db/commit/7c62bf5a159480eee0b3da0b526f943db59446a2), [`8ca04e7`](https://github.com/TanStack/db/commit/8ca04e747fde178bae76d21bc16ae057c9714a17), [`63362dc`](https://github.com/TanStack/db/commit/63362dc8cbe7f7a63e5e79fdedaed3c31a7fb7af), [`7f6b643`](https://github.com/TanStack/db/commit/7f6b6438cd3a5b2cfc54ea1d8ad8a2102ea9d699), [`d3c38c8`](https://github.com/TanStack/db/commit/d3c38c8f4e83cef4545e8011dc3419be1fcf527a), [`c479fdc`](https://github.com/TanStack/db/commit/c479fdc1c2e09d979842210148a08378fb5d71d7), [`91a2cbf`](https://github.com/TanStack/db/commit/91a2cbfb88fccc5f19f864b69632cfb8e95ed449), [`144c6b1`](https://github.com/TanStack/db/commit/144c6b132f65138d9a12321ef62a286f03551d21), [`5218f0c`](https://github.com/TanStack/db/commit/5218f0c385f61ccfa08ff366fb6f487528702017), [`76d766e`](https://github.com/TanStack/db/commit/76d766e84afbfcde2900a661233dd59e1decd5c2), [`1e54c6a`](https://github.com/TanStack/db/commit/1e54c6a2820ef5f1a87c6f4236311259c041fc24), [`d698b90`](https://github.com/TanStack/db/commit/d698b90579fd5ce3a4bf122ddd30fd4fe9f8d2b6), [`04a1a81`](https://github.com/TanStack/db/commit/04a1a81a0f5bd192d63e2ae5987f48aaf2c2a72a), [`3ad64a4`](https://github.com/TanStack/db/commit/3ad64a42a0088e1272176fb33c953526fed9b868), [`4c5a8de`](https://github.com/TanStack/db/commit/4c5a8de61843d6964a2580aded8a2d027b78e135), [`b72b5d1`](https://github.com/TanStack/db/commit/b72b5d1d2fd01df29373099dd50daf2373e3bb8b), [`fc1adde`](https://github.com/TanStack/db/commit/fc1adde85be0ed3570912688712ccc15875be906), [`2781581`](https://github.com/TanStack/db/commit/27815817c56b3bca1823703dbd9893a0ef86f6d2), [`40a5aea`](https://github.com/TanStack/db/commit/40a5aea5637ce4364ff2fc0bc747100f844bcdc2), [`e16d46c`](https://github.com/TanStack/db/commit/e16d46ce5d10c7f895c8abff86da4925f0eda2d1), [`9cbc885`](https://github.com/TanStack/db/commit/9cbc885e826695c5a33c4684f454ce176ad17d2d), [`23ae52d`](https://github.com/TanStack/db/commit/23ae52d7646593e9ddca9875c3c8e38945f8cdf4), [`7917ef9`](https://github.com/TanStack/db/commit/7917ef990deaf308ce7c4bd469707f01cb34746b), [`1ca838b`](https://github.com/TanStack/db/commit/1ca838b408e588ef52a817196d4ea576b1259008), [`34a999d`](https://github.com/TanStack/db/commit/34a999d7a67f6d2c468a5b6c13a29e2b41861a2b), [`825acc5`](https://github.com/TanStack/db/commit/825acc5ff3b703354088e81b3161d0cc830650cf), [`febd4bc`](https://github.com/TanStack/db/commit/febd4bcc3cafa53d552a7724619a513982789b56), [`b7a7d10`](https://github.com/TanStack/db/commit/b7a7d10d7a045614bd78f482f17a7d1ba568f2b5), [`510cb53`](https://github.com/TanStack/db/commit/510cb538c4706e21a4d70046bf2ab2753f47bfa8), [`efb84d8`](https://github.com/TanStack/db/commit/efb84d800fd162842815e872d088d070db5407e3), [`236d77b`](https://github.com/TanStack/db/commit/236d77bcbe2941816c756ea5f9e8db4c77c333f2), [`71ad428`](https://github.com/TanStack/db/commit/71ad4284922c2355eb723fc5a00f26c72296aef9)]:
  - @tanstack/db@0.10.0
  - @tanstack/react-db@0.4.2

## 0.0.3

### Patch Changes

- Updated dependencies [[`a378bd3`](https://github.com/TanStack/db/commit/a378bd3a65f6b9ed0c9a85f793b7dc2e2a59a313), [`ad043b7`](https://github.com/TanStack/db/commit/ad043b7455a5bdc549c36833bc72ddbe9ce8afed), [`025a079`](https://github.com/TanStack/db/commit/025a0799dd7690d892cacff5493b7270c33fdc2c), [`ddc129e`](https://github.com/TanStack/db/commit/ddc129eeab84d7eca4f2972c3dcc37506202a43d), [`6e60d30`](https://github.com/TanStack/db/commit/6e60d30a0e19642eeda72895722afdfca6cec749)]:
  - @tanstack/db@0.9.1
  - @tanstack/react-db@0.4.0

## 0.0.2

### Patch Changes

- Updated dependencies [[`cfb01ce`](https://github.com/TanStack/db/commit/cfb01cee34de7d0378e008dc8c01c1df5253c1e2)]:
  - @tanstack/db@0.9.0
  - @tanstack/react-db@0.3.8

## 0.0.1

### Patch Changes

- Updated dependencies [[`4b9e8cd`](https://github.com/TanStack/db/commit/4b9e8cdf79551734cf526e6fa4bbdba42ec94575)]:
  - @tanstack/db@0.8.0
  - @tanstack/react-db@0.3.0
">
<input type="hidden" name="project[files][next.config.ts]" value="import type { NextConfig } from &#39;next&#39;

const nextConfig: NextConfig = {
  reactStrictMode: true,
  transpilePackages: [`@tanstack/db`, `@tanstack/react-db`],
}

export default nextConfig
">
<input type="hidden" name="project[files][package.json]" value="{
  &quot;name&quot;: &quot;@tanstack/db-example-react-next-ssr-e2e&quot;,
  &quot;private&quot;: true,
  &quot;version&quot;: &quot;0.0.6&quot;,
  &quot;scripts&quot;: {
    &quot;build&quot;: &quot;next build&quot;,
    &quot;dev&quot;: &quot;next dev&quot;,
    &quot;start&quot;: &quot;next start&quot;,
    &quot;test:e2e&quot;: &quot;pnpm --filter @tanstack/db build &amp;&amp; pnpm --filter @tanstack/react-db build &amp;&amp; playwright test&quot;
  },
  &quot;dependencies&quot;: {
    &quot;@tanstack/db&quot;: &quot;https://pkg.pr.new/TanStack/db/@tanstack/db@926faa0&quot;,
    &quot;@tanstack/react-db&quot;: &quot;https://pkg.pr.new/TanStack/db/@tanstack/react-db@926faa0&quot;,
    &quot;next&quot;: &quot;^16.3.1&quot;,
    &quot;react&quot;: &quot;^19.2.4&quot;,
    &quot;react-dom&quot;: &quot;^19.2.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;typescript&quot;: &quot;^5.9.2&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:4176`
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 --hostname 127.0.0.1 --port 4176`,
        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;compilerOptions&quot;: {
    &quot;target&quot;: &quot;ES2017&quot;,
    &quot;lib&quot;: [&quot;dom&quot;, &quot;dom.iterable&quot;, &quot;esnext&quot;],
    &quot;allowJs&quot;: false,
    &quot;skipLibCheck&quot;: true,
    &quot;strict&quot;: true,
    &quot;noEmit&quot;: true,
    &quot;esModuleInterop&quot;: true,
    &quot;module&quot;: &quot;esnext&quot;,
    &quot;moduleResolution&quot;: &quot;bundler&quot;,
    &quot;resolveJsonModule&quot;: true,
    &quot;isolatedModules&quot;: true,
    &quot;jsx&quot;: &quot;react-jsx&quot;,
    &quot;incremental&quot;: true,
    &quot;plugins&quot;: [{ &quot;name&quot;: &quot;next&quot; }]
  },
  &quot;include&quot;: [
    &quot;next-env.d.ts&quot;,
    &quot;.next/types/**/*.ts&quot;,
    &quot;.next/dev/types/**/*.ts&quot;,
    &quot;**/*.ts&quot;,
    &quot;**/*.tsx&quot;
  ],
  &quot;exclude&quot;: [&quot;node_modules&quot;]
}
">
<input type="hidden" name="project[files][app/db-hydration.tsx]" value="&#39;use client&#39;

import { useState } from &#39;react&#39;
import { DbClient } from &#39;@tanstack/db&#39;
import { DbProvider, HydrationBoundary } from &#39;@tanstack/react-db&#39;
import type { DehydratedDbState } from &#39;@tanstack/db&#39;
import type { ReactNode } from &#39;react&#39;

export function DbHydration({
  state,
  children,
}: {
  state: DehydratedDbState
  children: ReactNode
}) {
  const [client] = useState(() =&gt; new DbClient({ runtime: `browser` }))

  return (
    &lt;DbProvider client={client}&gt;
      &lt;HydrationBoundary state={state}&gt;{children}&lt;/HydrationBoundary&gt;
    &lt;/DbProvider&gt;
  )
}
">
<input type="hidden" name="project[files][app/layout.tsx]" value="import type { Metadata } from &#39;next&#39;
import type { ReactNode } from &#39;react&#39;

export const metadata: Metadata = {
  title: `TanStack DB Next.js SSR E2E`,
}

export default function RootLayout({ children }: { children: ReactNode }) {
  return (
    &lt;html lang=&quot;en&quot;&gt;
      &lt;body&gt;{children}&lt;/body&gt;
    &lt;/html&gt;
  )
}
">
<input type="hidden" name="project[files][app/page.tsx]" value="import { Suspense } from &#39;react&#39;
import { DbClient } from &#39;@tanstack/db&#39;
import { DbHydration } from &#39;./db-hydration&#39;
import { streamedTodoQuery } from &#39;./ssr-fixture&#39;
import { StreamedTodos } from &#39;./streamed-todos&#39;

export const dynamic = `force-dynamic`

export default function Page() {
  const dbClient = new DbClient({ runtime: `server` })
  void dbClient.preloadLiveQuery(streamedTodoQuery)
  const state = dbClient.dehydrate({
    shouldDehydrateCollection: () =&gt; false,
    shouldDehydrateLiveQuery: () =&gt; true,
  })

  return (
    &lt;main&gt;
      &lt;h1&gt;TanStack DB Next.js SSR&lt;/h1&gt;
      &lt;DbHydration state={state}&gt;
        &lt;Suspense fallback={&lt;p data-testid=&quot;stream-fallback&quot;&gt;Loading todos&lt;/p&gt;}&gt;
          &lt;StreamedTodos /&gt;
        &lt;/Suspense&gt;
      &lt;/DbHydration&gt;
    &lt;/main&gt;
  )
}
">
<input type="hidden" name="project[files][app/ssr-fixture.ts]" value="import { collectionOptions, eq } from &#39;@tanstack/db&#39;
import type { InitialQueryBuilder } from &#39;@tanstack/db&#39;

export type StreamedTodo = {
  id: string
  text: string
  status: `open` | `done`
  sourcePayload: string
}

const serverTodo: StreamedTodo = {
  id: `next-server-1`,
  text: `Streamed from Next.js`,
  status: `open`,
  sourcePayload: `NEXT_SOURCE_ONLY_DO_NOT_TRANSPORT`,
}

const browserTodo: StreamedTodo = {
  id: `next-browser-1`,
  text: `Reconciled by Next.js browser sync`,
  status: `open`,
  sourcePayload: `NEXT_BROWSER_SOURCE_ONLY_DO_NOT_TRANSPORT`,
}

export const streamedTodoCollection = collectionOptions(
  `next-ssr-stream-todos`,
  (client) =&gt; {
    const runtime = client.requireDependency&lt;`server` | `browser`&gt;(`runtime`)

    return {
      id: `next-ssr-stream-todos`,
      getKey: (todo: StreamedTodo) =&gt; todo.id,
      syncMode: `on-demand` as const,
      sync: {
        sync: ({ begin, write, commit, markReady }) =&gt; {
          markReady()
          return {
            loadSubset: () =&gt;
              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 streamedTodoQuery = {
  query: (q: InitialQueryBuilder) =&gt;
    q
      .from({ todo: streamedTodoCollection })
      .where(({ todo }) =&gt; eq(todo.status, `open`))
      .select(({ todo }) =&gt; ({
        id: todo.id,
        text: todo.text,
        status: todo.status,
      })),
}
">
<input type="hidden" name="project[files][app/streamed-todos.tsx]" value="&#39;use client&#39;

import { useLiveSuspenseQuery } from &#39;@tanstack/react-db&#39;
import { streamedTodoQuery } from &#39;./ssr-fixture&#39;

export function StreamedTodos() {
  const { data: todos } = useLiveSuspenseQuery(streamedTodoQuery)

  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][e2e/ssr-db.spec.ts]" value="import { expect, test } from &#39;@playwright/test&#39;

test(`Next.js streams a DB result snapshot and hands off to browser sync`, async ({
  page,
  request,
}) =&gt; {
  const response = await request.get(`/`)
  expect(response.ok()).toBe(true)
  const html = await response.text()
  expect(html).toContain(`Streamed from Next.js`)
  expect(html).not.toContain(`NEXT_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(`/`, { waitUntil: `commit` })

  await expect(page.getByTestId(`stream-fallback`)).toBeVisible()
  await expect(page.getByTestId(`streamed-todo-next-server-1`)).toHaveText(
    `Streamed from Next.js`,
  )
  await expect(page.getByTestId(`stream-fallback`)).not.toBeVisible()
  await expect(
    page.getByTestId(`streamed-todo-next-server-1`),
  ).not.toBeVisible()
  await expect(page.getByTestId(`streamed-todo-next-browser-1`)).toHaveText(
    `Reconciled by Next.js browser sync`,
  )
  expect(browserErrors).toEqual([])
})
">
<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-next-ssr-e2e">
</form>
<script>document.getElementById("mainForm").submit();</script>

</body></html>