feat: add default setting for ssr in router (#2477)

Author: schiller-manuel

packages/react-router/src/route.ts

@@ -882,6 +882,7 @@ export class Route<
   private _path!: TPath
   private _fullPath!: TFullPath
   private _to!: TrimPathRight<TFullPath>
+  private _ssr!: boolean
 
   public get to() {
     /* invariant(
@@ -916,6 +917,10 @@ export class Route<
     return this._fullPath
   }
 
+  public get ssr() {
+    return this._ssr
+  }
+
   // Optional
   children?: TChildren
   originalIndex?: number
@@ -984,7 +989,7 @@ export class Route<
     loaderDeps: TLoaderDeps
   }
 
-  init = (opts: { originalIndex: number }): void => {
+  init = (opts: { originalIndex: number; defaultSsr?: boolean }): void => {
     this.originalIndex = opts.originalIndex
 
     const options = this.options as
@@ -1051,6 +1056,7 @@ export class Route<
     // this.customId = customId as TCustomId
     this._fullPath = fullPath as TFullPath
     this._to = fullPath as TrimPathRight<TFullPath>
+    this._ssr = options?.ssr ?? opts.defaultSsr ?? true
   }
 
   addChildren<

packages/react-router/src/router.ts

@@ -451,6 +451,8 @@ export interface RouterOptions<
    * @link [API Docs](https://tanstack.com/router/latest/docs/framework/react/api/router/RouterOptionsType#isserver property)
    */
   isServer?: boolean
+
+  defaultSsr?: boolean
 }
 
 export interface RouterErrorSerializer<TSerializedError> {
@@ -773,13 +775,19 @@ export class Router<
 
     const notFoundRoute = this.options.notFoundRoute
     if (notFoundRoute) {
-      notFoundRoute.init({ originalIndex: 99999999999 })
+      notFoundRoute.init({
+        originalIndex: 99999999999,
+        defaultSsr: this.options.defaultSsr,
+      })
       ;(this.routesById as any)[notFoundRoute.id] = notFoundRoute
     }
 
     const recurseRoutes = (childRoutes: Array<AnyRoute>) => {
       childRoutes.forEach((childRoute, i) => {
-        childRoute.init({ originalIndex: i })
+        childRoute.init({
+          originalIndex: i,
+          defaultSsr: this.options.defaultSsr,
+        })
 
         const existingRoute = (this.routesById as any)[childRoute.id]
 

packages/router-plugin/package.json

@@ -25,6 +25,7 @@
   ],
   "scripts": {
     "clean": "rimraf ./dist && rimraf ./coverage",
+    "clean:snapshots": "rimraf **/*snapshot* --glob",
     "test": "pnpm test:eslint && pnpm test:types && pnpm test:build && pnpm test:unit",
     "test:unit": "vitest",
     "test:unit:dev": "vitest --watch",

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

@@ -148,7 +148,7 @@ export function compileCodeSplitReferenceRoute(opts: ParseAstOptions) {
                             }
 
                             prop.value = template.expression(
-                              `lazyRouteComponent($$splitComponentImporter, 'component', () => Route.options.ssr)`,
+                              `lazyRouteComponent($$splitComponentImporter, 'component', () => Route.ssr)`,
                             )()
 
                             programPath.pushContainer('body', [

packages/router-plugin/tests/code-splitter/snapshots/destructured-react-memo-imported-component.tsx

@@ -4,6 +4,6 @@ const $$splitComponentImporter = () => import('tsr-split:destructured-react-memo
 import { lazyRouteComponent } from '@tanstack/react-router';
 import { createFileRoute } from '@tanstack/react-router';
 export const Route = createFileRoute('/')({
-  component: lazyRouteComponent($$splitComponentImporter, 'component', () => Route.options.ssr),
+  component: lazyRouteComponent($$splitComponentImporter, 'component', () => Route.ssr),
   loader: lazyFn($$splitLoaderImporter, 'loader')
 });

packages/router-plugin/tests/code-splitter/snapshots/function-declaration.tsx

@@ -5,5 +5,5 @@ import { lazyFn } from '@tanstack/react-router';
 import { createFileRoute } from '@tanstack/react-router';
 export const Route = createFileRoute('/posts')({
   loader: lazyFn($$splitLoaderImporter, 'loader'),
-  component: lazyRouteComponent($$splitComponentImporter, 'component', () => Route.options.ssr)
+  component: lazyRouteComponent($$splitComponentImporter, 'component', () => Route.ssr)
 });

packages/router-plugin/tests/code-splitter/snapshots/imported-default-component-destructured-loader.tsx

@@ -4,6 +4,6 @@ const $$splitComponentImporter = () => import('tsr-split:imported-default-compon
 import { lazyRouteComponent } from '@tanstack/react-router';
 import { createFileRoute } from '@tanstack/react-router';
 export const Route = createFileRoute('/')({
-  component: lazyRouteComponent($$splitComponentImporter, 'component', () => Route.options.ssr),
+  component: lazyRouteComponent($$splitComponentImporter, 'component', () => Route.ssr),
   loader: lazyFn($$splitLoaderImporter, 'loader')
 });

packages/router-plugin/tests/code-splitter/snapshots/imported-default-component.tsx

@@ -2,5 +2,5 @@ const $$splitComponentImporter = () => import('tsr-split:imported-default-compon
 import { lazyRouteComponent } from '@tanstack/react-router';
 import { createFileRoute } from '@tanstack/react-router';
 export const Route = createFileRoute('/')({
-  component: lazyRouteComponent($$splitComponentImporter, 'component', () => Route.options.ssr)
+  component: lazyRouteComponent($$splitComponentImporter, 'component', () => Route.ssr)
 });

packages/router-plugin/tests/code-splitter/snapshots/imported.tsx

@@ -4,6 +4,6 @@ const $$splitComponentImporter = () => import('tsr-split:imported.tsx?tsr-split'
 import { lazyRouteComponent } from '@tanstack/react-router';
 import { createFileRoute } from '@tanstack/react-router';
 export const Route = createFileRoute('/')({
-  component: lazyRouteComponent($$splitComponentImporter, 'component', () => Route.options.ssr),
+  component: lazyRouteComponent($$splitComponentImporter, 'component', () => Route.ssr),
   loader: lazyFn($$splitLoaderImporter, 'loader')
 });

packages/router-plugin/tests/code-splitter/snapshots/inline.tsx

@@ -2,7 +2,7 @@ const $$splitComponentImporter = () => import('tsr-split:inline.tsx?tsr-split');
 import { lazyRouteComponent } from '@tanstack/react-router';
 import { createFileRoute } from '@tanstack/react-router';
 export const Route = createFileRoute('/')({
-  component: lazyRouteComponent($$splitComponentImporter, 'component', () => Route.options.ssr)
+  component: lazyRouteComponent($$splitComponentImporter, 'component', () => Route.ssr)
 });
 Route.addChildren([]);
 export const test = 'test';