feat: allow to exclude routes from SSR

packages/react-router/src/lazyRouteComponent.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react'
+import { Outlet } from './Match'
 import type { AsyncRouteComponent } from './route'
 
 // If the load fails due to module not found, it may mean a new version of
@@ -13,12 +14,32 @@ function isModuleNotFoundError(error: any): boolean {
   )
 }
 
+export function ClientOnly({
+  children,
+  fallback = null,
+}: React.PropsWithChildren<{ fallback?: React.ReactNode }>) {
+  return useHydrated() ? <>{children}</> : <>{fallback}</>
+}
+
+function subscribe() {
+  return () => {}
+}
+
+export function useHydrated() {
+  return React.useSyncExternalStore(
+    subscribe,
+    () => true,
+    () => false,
+  )
+}
+
 export function lazyRouteComponent<
   T extends Record<string, any>,
   TKey extends keyof T = 'default',
 >(
   importer: () => Promise<T>,
   exportName?: TKey,
+  ssr?: () => boolean,
 ): T[TKey] extends (props: infer TProps) => any
   ? AsyncRouteComponent<TProps>
   : never {
@@ -27,6 +48,10 @@ export function lazyRouteComponent<
   let error: any
 
   const load = () => {
+    if (typeof document === 'undefined' && ssr?.() === false) {
+      comp = (() => null) as any
+      return Promise.resolve()
+    }
     if (!loadPromise) {
       loadPromise = importer()
         .then((res) => {
@@ -81,6 +106,13 @@ export function lazyRouteComponent<
       throw load()
     }
 
+    if (ssr?.() === false) {
+      return (
+        <ClientOnly fallback={<Outlet />}>
+          {React.createElement(comp, props)}
+        </ClientOnly>
+      )
+    }
     return React.createElement(comp, props)
   }
 

packages/react-router/src/route.ts

@@ -321,7 +321,6 @@ export interface UpdatableRouteOptions<
   in out TRouteContextFn,
   in out TBeforeLoadFn,
 > extends UpdatableStaticRouteOption {
-  // test?: (args: TAllContext) => void
   // If true, this route will be matched as case-sensitive
   caseSensitive?: boolean
   // If true, this route will be forcefully wrapped in a suspense boundary
@@ -439,6 +438,7 @@ export interface UpdatableRouteOptions<
   headers?: (ctx: {
     loaderData: ResolveLoaderData<TLoaderFn>
   }) => Record<string, string>
+  ssr?: boolean
 }
 
 interface RequiredStaticDataRouteOption {

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')`,
+                              `lazyRouteComponent($$splitComponentImporter, 'component', () => Route.options.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'),
+  component: lazyRouteComponent($$splitComponentImporter, 'component', () => Route.options.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')
+  component: lazyRouteComponent($$splitComponentImporter, 'component', () => Route.options.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'),
+  component: lazyRouteComponent($$splitComponentImporter, 'component', () => Route.options.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')
+  component: lazyRouteComponent($$splitComponentImporter, 'component', () => Route.options.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'),
+  component: lazyRouteComponent($$splitComponentImporter, 'component', () => Route.options.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')
+  component: lazyRouteComponent($$splitComponentImporter, 'component', () => Route.options.ssr)
 });
 Route.addChildren([]);
 export const test = 'test';

packages/router-plugin/tests/code-splitter/snapshots/random-number.tsx

@@ -7,5 +7,5 @@ export const textColors = [`text-rose-500`, `text-yellow-500`, `text-teal-500`,
 export const gradients = [`from-rose-500 to-yellow-500`, `from-yellow-500 to-teal-500`, `from-teal-500 to-violet-500`, `from-blue-500 to-pink-500`];
 export const Route = createFileRoute('/')({
   loader: lazyFn($$splitLoaderImporter, 'loader'),
-  component: lazyRouteComponent($$splitComponentImporter, 'component')
+  component: lazyRouteComponent($$splitComponentImporter, 'component', () => Route.options.ssr)
 });

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

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

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

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

packages/router-plugin/tests/code-splitter/snapshots/retain-exports-loader.tsx

@@ -7,7 +7,7 @@ export function loaderFn() {
   };
 }
 export const Route = createFileRoute('/_layout')({
-  component: lazyRouteComponent($$splitComponentImporter, 'component'),
+  component: lazyRouteComponent($$splitComponentImporter, 'component', () => Route.options.ssr),
   loader: loaderFn
 });
 export const SIDEBAR_WIDTH = '150px';

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

@@ -4,7 +4,7 @@ import { startProject } from '~/projects/start';
 import { createFileRoute } from '@tanstack/react-router';
 import { seo } from '~/utils/seo';
 export const Route = createFileRoute('/_libraries/start/$version/')({
-  component: lazyRouteComponent($$splitComponentImporter, 'component'),
+  component: lazyRouteComponent($$splitComponentImporter, 'component', () => Route.options.ssr),
   meta: () => seo({
     title: startProject.name,
     description: startProject.description