feat: ssr setting per route #4565

schiller-manuel · 2025-07-02T18:30:11Z

No description provided.

nx-cloud · 2025-07-02T18:31:46Z

View your CI Pipeline Execution ↗ for commit 7c279e5

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

☁️ Nx Cloud last updated this comment at 2025-07-05 12:28:06 UTC

pkg-pr-new · 2025-07-02T18:36:47Z

More templates

@tanstack/arktype-adapter

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

@tanstack/directive-functions-plugin

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

@tanstack/eslint-plugin-router

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

@tanstack/history

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

@tanstack/react-router

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

@tanstack/react-router-devtools

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

@tanstack/react-router-with-query

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

@tanstack/react-start

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

@tanstack/react-start-client

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

@tanstack/react-start-plugin

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

@tanstack/react-start-server

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

@tanstack/router-cli

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

@tanstack/router-core

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

@tanstack/router-devtools

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

@tanstack/router-devtools-core

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

@tanstack/router-generator

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

@tanstack/router-plugin

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

@tanstack/router-utils

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

@tanstack/router-vite-plugin

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

@tanstack/server-functions-plugin

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

@tanstack/solid-router

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

@tanstack/solid-router-devtools

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

@tanstack/solid-start

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

@tanstack/solid-start-client

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

@tanstack/solid-start-plugin

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

@tanstack/solid-start-server

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

@tanstack/start-client-core

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

@tanstack/start-plugin-core

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

@tanstack/start-server-core

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

@tanstack/start-server-functions-client

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

@tanstack/start-server-functions-fetcher

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

@tanstack/start-server-functions-server

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

@tanstack/valibot-adapter

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

@tanstack/virtual-file-routes

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

@tanstack/zod-adapter

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

commit: 7c279e5

SeanCassiere · 2025-07-03T03:32:56Z

packages/router-core/src/recoverableError.ts

+
+export function isRecoverableError(error: unknown): boolean {
+  if (error instanceof Error) {
+    return error.message.includes(RECOVERABLE_ERROR)


Maybe make this a more specific?

startsWith(`${RECOVERABLE_ERROR}: `)

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

packages/router-plugin/src/core/code-splitter/compilers.ts

SeanCassiere · 2025-07-03T03:46:22Z

packages/start-plugin-core/src/start-router-plugin/plugin.ts


 export function tanStackStartRouter(config: Config): Array<PluginOption> {
  return [
    tanstackRouterGenerator({
      ...config,
      plugins: [serverRoutesPlugin(), routesManifestPlugin()],
+      environmentName: VITE_ENVIRONMENT_NAMES.client,


Rename this to to something like viteEnvironmentName or something like viteApplyEnvironment?

Purely since it wouldn't have any effect on the other bundlers.

SeanCassiere · 2025-07-03T03:49:25Z

packages/router-core/src/router.ts


              const route = this.looseRoutesById[routeId]!

              const pendingMs =
                route.options.pendingMs ?? this.options.defaultPendingMs

+              if (this.isServer) {


Could use some comments here.

birkskyum

Works as I'd expect

disable this in the server env

only use addHmr

… in React instead, use the same approach as in Solid also ensure that hydration is not blocked while router loads in SPA mode. keep the outermost pending component shown upon hydration to avoid flashes.

SeanCassiere

.

SeanCassiere · 2025-07-05T01:14:29Z

...-nodes/snapshots/react/1-delete-nodes-undefined/development/createRootRoute-ssr-function.tsx

+    return <div className="p-2">hello world</div>;
+  }
+});
+if (import.meta.hot) {


Is it necessary to have both development and production snapshots related testing for the "delete-nodes" functionality?

Currently, the difference between 'development' and 'production', is the inclusion of the HMR setup using import.meta.hot.accept.

SeanCassiere · 2025-07-05T01:18:12Z

packages/router-plugin/tests/delete-nodes.test.ts

+  },
+]
+
+const frameworks: Array<Config['target']> = ['react', 'solid']


This should probably now become a shared variable between code-splitter.test.ts and delete-nodes.test.ts so that any additions in the future (of other frameworks) don't cause drift.

SeanCassiere · 2025-07-05T01:19:31Z

packages/router-plugin/src/core/config.ts

+  /**
+   * @default true
+   */
+  addHmr?: boolean


What use-case would cause the user to set this to false?

see start-plugin-core. on the server there is no hmr added for example

SeanCassiere · 2025-07-05T01:21:35Z

packages/router-plugin/src/core/code-splitter/compilers.ts

@@ -138,27 +143,51 @@ export function compileCodeSplitReferenceRoute(

            if (
              !(
-                path.node.callee.name === 'createRoute' ||
-                path.node.callee.name === 'createFileRoute'
+                path.node.callee.name === 'createFileRoute' ||


Suggested change

path.node.callee.name === 'createFileRoute' ||

['createFileRoute', 'createRootRoute', 'createRootRouteWithContext'].includes(path.node.callee.name)

SeanCassiere · 2025-07-05T01:23:19Z

packages/router-plugin/src/core/code-splitter/compilers.ts

+                    },
+                  )
+                }
+                if (createRouteFn !== 'createFileRoute') {


I think its worth adding a comment here for future adventurers stating that the code-splitting we're exiting early here since the rootRoute is never code-split.

Perhaps the exit condition should just check for createRootRoute or createRootRouteWithContext.

SeanCassiere · 2025-07-05T01:32:12Z

e2e/react-start/selective-ssr/src/routes/posts.$postId.tsx

+export const Route = createFileRoute('/posts/$postId')({
+  validateSearch: z.object({ postId: ssrSchema }),
+  ssr: ({ search }) => {
+    if (typeof window !== 'undefined') {


Not sure how important this is, but we can probably share the content of the ssr, beforeLoad, and component between the routes yes?

schiller-manuel requested a review from birkskyum July 2, 2025 18:30

github-actions bot added package: react-router package: router-core package: router-plugin package: solid-router package: react-start-plugin package: start-plugin-core labels Jul 2, 2025

schiller-manuel requested a review from tannerlinsley July 2, 2025 20:41

schiller-manuel mentioned this pull request Jul 2, 2025

fix(router-plugin): handle explicit undefined component in code splitter #4564

Merged

SeanCassiere reviewed Jul 3, 2025

View reviewed changes

birkskyum approved these changes Jul 3, 2025

View reviewed changes

schiller-manuel force-pushed the feat-ssr-per-route branch from 4379017 to b2fad94 Compare July 3, 2025 20:48

github-actions bot added documentation Everything documentation related package: eslint-plugin-router labels Jul 3, 2025

schiller-manuel force-pushed the feat-ssr-per-route branch from 785de2e to c2b3fe4 Compare July 3, 2025 22:14

SeanCassiere approved these changes Jul 4, 2025

View reviewed changes

schiller-manuel added 12 commits July 4, 2025 19:49

feat: ssr setting per route

bebe0c0

tagged union for maybe search / params

f9558ac

remove unused import

0b16b9c

remove maybe prefix

236620b

working Solid implementation

d310b0a

remove log

536e286

handle deleteNodes as Set

a9fe2bc

move environmentName under plugin.vite

89ed4df

call onMatchSettled also when loader is not run

2b60082

add ssr to eslint plugin 'create-route-property-order'

506dad0

allow to return undefined in ssr()

40b8eee

fix environment check

64af1b6

schiller-manuel added 10 commits July 4, 2025 19:49

support node removal also in root route

ba04c2c

add HMR handling for root route

96742f0

make adding of HMR handling configurable

6e7e989

disable this in the server env

make hmr plugin vite environment aware

ee45579

remove unused var

a2e31c9

make sure head gets loaderdata via match

8f837d5

skip loading route chunk on the server in case of ssr!=true

48ba565

formatting

03ab45c

don't pass runtimeEnv into compileCodeSplitReferenceRoute

eb9ca6d

only use addHmr

for ssr:false and SPA mode, don't use error throwing to exit Suspense…

a0eb984

… in React instead, use the same approach as in Solid also ensure that hydration is not blocked while router loads in SPA mode. keep the outermost pending component shown upon hydration to avoid flashes.

schiller-manuel force-pushed the feat-ssr-per-route branch from c2b3fe4 to a0eb984 Compare July 4, 2025 17:50

schiller-manuel added 3 commits July 4, 2025 22:32

fix lint

2620b2a

add e2e tests for selective ssr

85501b4

add e2e test to solid

2bd41c0

schiller-manuel force-pushed the feat-ssr-per-route branch from fcf9223 to 2bd41c0 Compare July 4, 2025 20:59

ci: apply automated fixes

5546fc7

SeanCassiere reviewed Jul 5, 2025

View reviewed changes

schiller-manuel added 3 commits July 5, 2025 12:50

move frameworks into reusable constant

c5924a2

generalize code splitting

b2ab3bc

add docs

7c279e5

schiller-manuel force-pushed the feat-ssr-per-route branch from 60628c3 to 7c279e5 Compare July 5, 2025 12:26

schiller-manuel merged commit d728d69 into main Jul 5, 2025
5 checks passed

schiller-manuel deleted the feat-ssr-per-route branch July 5, 2025 12:35

	path.node.callee.name === 'createFileRoute' \|\|
	['createFileRoute', 'createRootRoute', 'createRootRouteWithContext'].includes(path.node.callee.name)

Uh oh!

feat: ssr setting per route #4565

feat: ssr setting per route #4565

Uh oh!

Conversation

schiller-manuel commented Jul 2, 2025

Uh oh!

nx-cloud bot commented Jul 2, 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 2, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

birkskyum left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

SeanCassiere left a comment

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!

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!

Uh oh!

nx-cloud bot commented Jul 2, 2025 •

edited

Loading

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

edited

Loading

birkskyum left a comment •

edited

Loading