feat: use seroval for SSR by schiller-manuel · Pull Request #4600 · TanStack/router

schiller-manuel · 2025-07-08T17:52:04Z

also stream all queries in react-router-with-query

nx-cloud · 2025-07-08T17:52:33Z

View your CI Pipeline Execution ↗ for commit 9220a3e

Command	Status	Duration	Result
`nx affected --targets=test:eslint,test:unit,tes...`	✅ Succeeded	1m 31s	View ↗
`nx run-many --target=build --exclude=examples/*...`	✅ Succeeded	6s	View ↗

☁️ Nx Cloud last updated this comment at 2025-07-10 22:09:10 UTC

pkg-pr-new · 2025-07-08T17:56:00Z

More templates

@tanstack/arktype-adapter

npm i https://pkg.pr.new/TanStack/router/@tanstack/arktype-adapter@4600

@tanstack/directive-functions-plugin

npm i https://pkg.pr.new/TanStack/router/@tanstack/directive-functions-plugin@4600

@tanstack/eslint-plugin-router

npm i https://pkg.pr.new/TanStack/router/@tanstack/eslint-plugin-router@4600

@tanstack/history

npm i https://pkg.pr.new/TanStack/router/@tanstack/history@4600

@tanstack/react-router

npm i https://pkg.pr.new/TanStack/router/@tanstack/react-router@4600

@tanstack/react-router-devtools

npm i https://pkg.pr.new/TanStack/router/@tanstack/react-router-devtools@4600

@tanstack/react-router-with-query

npm i https://pkg.pr.new/TanStack/router/@tanstack/react-router-with-query@4600

@tanstack/react-start

npm i https://pkg.pr.new/TanStack/router/@tanstack/react-start@4600

@tanstack/react-start-client

npm i https://pkg.pr.new/TanStack/router/@tanstack/react-start-client@4600

@tanstack/react-start-plugin

npm i https://pkg.pr.new/TanStack/router/@tanstack/react-start-plugin@4600

@tanstack/react-start-server

npm i https://pkg.pr.new/TanStack/router/@tanstack/react-start-server@4600

@tanstack/router-cli

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-cli@4600

@tanstack/router-core

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-core@4600

@tanstack/router-devtools

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-devtools@4600

@tanstack/router-devtools-core

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-devtools-core@4600

@tanstack/router-generator

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-generator@4600

@tanstack/router-plugin

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-plugin@4600

@tanstack/router-utils

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-utils@4600

@tanstack/router-vite-plugin

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-vite-plugin@4600

@tanstack/server-functions-plugin

npm i https://pkg.pr.new/TanStack/router/@tanstack/server-functions-plugin@4600

@tanstack/solid-router

npm i https://pkg.pr.new/TanStack/router/@tanstack/solid-router@4600

@tanstack/solid-router-devtools

npm i https://pkg.pr.new/TanStack/router/@tanstack/solid-router-devtools@4600

@tanstack/solid-start

npm i https://pkg.pr.new/TanStack/router/@tanstack/solid-start@4600

@tanstack/solid-start-client

npm i https://pkg.pr.new/TanStack/router/@tanstack/solid-start-client@4600

@tanstack/solid-start-plugin

npm i https://pkg.pr.new/TanStack/router/@tanstack/solid-start-plugin@4600

@tanstack/solid-start-server

npm i https://pkg.pr.new/TanStack/router/@tanstack/solid-start-server@4600

@tanstack/start-client-core

npm i https://pkg.pr.new/TanStack/router/@tanstack/start-client-core@4600

@tanstack/start-plugin-core

npm i https://pkg.pr.new/TanStack/router/@tanstack/start-plugin-core@4600

@tanstack/start-server-core

npm i https://pkg.pr.new/TanStack/router/@tanstack/start-server-core@4600

@tanstack/start-server-functions-client

npm i https://pkg.pr.new/TanStack/router/@tanstack/start-server-functions-client@4600

@tanstack/start-server-functions-fetcher

npm i https://pkg.pr.new/TanStack/router/@tanstack/start-server-functions-fetcher@4600

@tanstack/start-server-functions-server

npm i https://pkg.pr.new/TanStack/router/@tanstack/start-server-functions-server@4600

@tanstack/valibot-adapter

npm i https://pkg.pr.new/TanStack/router/@tanstack/valibot-adapter@4600

@tanstack/virtual-file-routes

npm i https://pkg.pr.new/TanStack/router/@tanstack/virtual-file-routes@4600

@tanstack/zod-adapter

npm i https://pkg.pr.new/TanStack/router/@tanstack/zod-adapter@4600

commit: 9220a3e

packages/react-router-with-query/src/index.tsx

SeanCassiere · 2025-07-09T05:50:26Z

packages/router-core/src/ssr/ssr-client.ts

-  type: 'stream'
-  value?: ReadableStream & { controller?: ReadableStreamDefaultController }
+export interface TsrSsrGlobal {
+  r?: DehydratedRouter


While it makes sense for the matches to have keys be shortened (i.e. i, b, l, etc.), I think these single callers may benefit from just being left with having descriptive names to represent their purpose (i.e. router/dehydratedRouter, close, whatever_v_is).

renamed r to router, v is gone
added a comment to c ( the cleanup function), this is called per script injection and thus benefits from a short name

SeanCassiere · 2025-07-09T05:53:39Z

packages/start-client-core/src/serializer.ts

+import { isPlainObject } from '@tanstack/router-core'

-export interface TsrSerializer {
+export interface StartSerializer {


Why does the Serializer get moved to Start? why not keep it in router-core.

Wouldn't this same serializer benefit normal basic-file-based-ssr-streaming as well?

this PR only uses seroval for SSR
for server functions, we still use the old serializer. in a followup PR, we'll move server functions over to seroval as well

isnifer · 2025-07-11T11:30:05Z

packages/react-router-with-query/src/index.tsx

+  hydrate as queryHydrate,
 } from '@tanstack/react-query'
 import { isRedirect } from '@tanstack/router-core'
+import '@tanstack/router-core/ssr/client'


Looks like extra import

what's the issue here?

Is this intended to import this module like side effect without import specific functions, etc?

the import is necessary to get the type import. is there any problem with that import?

Sorry for disturbing.
I expected to see something like:

import { type SomeType } from '@tanstack/router-core/ssr/client'

instead of import '@tanstack/router-core/ssr/client'

gunnartorfis · 2025-07-17T09:31:28Z

@schiller-manuel this breaks Clerk with Tanstack Start.

The Clerk starter isn't working in the latest start version. The getAuth() function throws: https://github.com/TanStack/router/tree/main/examples/react/start-clerk-basic

The reason I reach out here is that I want to point the Clerk team towards something if the fix lies no their end.

AhmedBaset · 2025-07-19T14:54:59Z

Is there a way to configure a custom serializer? seems like firebase' Timestamp is broken

Error reading routerStream: g [Error]: The value [object Object] of type "object" cannot be parsed/serialized.
      
There are few workarounds for this problem:
- Transform the value in a way that it can be serialized.
- If the reference is present on multiple runtimes (isomorphic), you can use the Reference API to map the references.
    at G.parseObject (file:///path/to/seroval@1.3.2/node_modules/seroval/dist/esm/production/index.mjs:17:31059)
  value: Timestamp { seconds: 1739221386, nanoseconds: 843000000 }
}
Error reading appStream: TypeError [ERR_INVALID_STATE]: Invalid state: Controller is already closed
    at ReadableStreamDefaultController.enqueue (node:internal/webstreams/readablestream:1077:13)
    at Object.write (file:///path/to/@tanstack+router-core@1.128.4/node_modules/@tanstack/router-core/dist/esm/ssr/transformStreamWithRouter.js:29:18)
    at Object.onData (file:///path/to/@tanstack+router-core@1.128.4/node_modules/@tanstack/router-core/dist/esm/ssr/transformStreamWithRouter.js:158:26)
    at readStream (file:///home/ahmed/projects/59-haya-flower/node_modules/.pnpm/@tanstack+router-core@1.128.4/node_modules/@tanstack/router-core/dist/esm/ssr/transformStreamWithRouter.js:51:48) {
  code: 'ERR_INVALID_STATE'
}
node:internal/process/promises:394
    triggerUncaughtException(err, true /* fromPromise */);
    ^

Node.js v24.3.0

schiller-manuel · 2025-07-19T15:00:19Z

@AhmedBaset not yet. there will be a way to add custom seroval plugins

AhmedBaset · 2025-07-19T15:03:28Z

Any fixes at the moment except downgrading?

schiller-manuel · 2025-07-19T15:19:25Z

don't return anything from loader / beforeLoad that contains custom classes

ttessarolo · 2025-07-23T09:35:39Z

@schiller-manuel for instance "clerkInitialState" is a custom class (or maybe QueryClient)?
That's my context that breaks the app:

context {
  queryClient: QueryClient {},
  clerkInitialState: {
    __internal_clerk_state: {
      __clerk_ssr_state: [Object],
      __publishableKey: 'pk_test_bW9yZS15ZXRpLTczLmNsZXJrLmFjY291bnRzLmRldiQ',
      __proxyUrl: '',
      __domain: '',
      __isSatellite: false,
      __signInUrl: '',
      __signUpUrl: '',
      __afterSignInUrl: '',
      __afterSignUpUrl: '',
      __clerk_debug: [Object],
      __clerkJSUrl: undefined,
      __clerkJSVersion: undefined,
      __telemetryDisabled: false,
      __telemetryDebug: false,
      __signInForceRedirectUrl: '',
      __signUpForceRedirectUrl: '',
      __signInFallbackRedirectUrl: '',
      __signUpFallbackRedirectUrl: ''
    }
  },
  user: { id: 'user_2zrMCOP6EyuJrJoiHwIrrc5qzAp' }
}

feat: use seroval for SSR

24a12ee

also stream all queries in react-router-with-query

github-actions bot added documentation Everything documentation related package: react-router package: router-core package: react-router-with-query package: solid-router package: react-start-client package: solid-start-client package: start-client-core labels Jul 8, 2025

SeanCassiere reviewed Jul 9, 2025

View reviewed changes

kusiewicz mentioned this pull request Jul 10, 2025

fix: remove debug log #4604

Merged

birkskyum mentioned this pull request Jul 10, 2025

solid start with solid query client hydrate/dehydrate #4325

Closed

fix

23ae3db

schiller-manuel force-pushed the seroval branch from 4a2a4b9 to 23ae3db Compare July 10, 2025 19:09

github-actions bot added the package: start-server-core label Jul 10, 2025

schiller-manuel added 4 commits July 10, 2025 22:53

fix lint

09afc74

fix dehydrate

9b6f068

make isClosed() a function, also simplify async stream reading

ea8fce2

fix lint

9220a3e

schiller-manuel merged commit 6475b35 into main Jul 10, 2025
5 checks passed

schiller-manuel deleted the seroval branch July 10, 2025 22:25

isnifer reviewed Jul 11, 2025

View reviewed changes

wobsoriano mentioned this pull request Jul 17, 2025

fix(tanstack-react-start): Handle serialization issue when doing handshake clerk/javascript#6345

Merged

9 tasks

Uh oh!

Conversation

schiller-manuel commented Jul 8, 2025

Uh oh!

nx-cloud bot commented Jul 8, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

pkg-pr-new bot commented Jul 8, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

gunnartorfis commented Jul 17, 2025

Uh oh!

AhmedBaset commented Jul 19, 2025

Uh oh!

schiller-manuel commented Jul 19, 2025

Uh oh!

AhmedBaset commented Jul 19, 2025

Uh oh!

schiller-manuel commented Jul 19, 2025

Uh oh!

ttessarolo commented Jul 23, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

nx-cloud bot commented Jul 8, 2025 •

edited

Loading

pkg-pr-new bot commented Jul 8, 2025 •

edited

Loading