📄 tanstack/router/latest/docs/framework/react/examples/basic-ssr-streaming-file-based

=================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================

Code ExplorerCode

Interactive SandboxSandbox

.vscode
public
src
- routes
  - posts
  - __root.tsx
  - error.tsx
  - index.tsx
- entry-client.tsx
- entry-server.tsx
- fetch-polyfill.js
- routeTree.gen.ts
- router.tsx
- routerContext.tsx
.gitignore
README.md
package.json
server.js
tsconfig.json
vite.config.ts

tsx

import { TanStackRouterDevtools } from '@tanstack/react-router-devtools'
import * as React from 'react'
import {
  HeadContent,
  Link,
  Outlet,
  Scripts,
  createRootRouteWithContext,
} from '@tanstack/react-router'
import type { RouterContext } from '../routerContext'

export const Route = createRootRouteWithContext<RouterContext>()({
  head: () => ({
    links: [{ rel: 'icon', href: '/images/favicon.ico' }],
    meta: [\
      {\
        title: 'TanStack Router SSR Basic File Based Streaming',\
      },\
      {\
        charSet: 'UTF-8',\
      },\
      {\
        name: 'viewport',\
        content: 'width=device-width, initial-scale=1.0',\
      },\
    ],
    scripts: [\
      {\
        src: 'https://unpkg.com/@tailwindcss/browser@4',\
      },\
      ...(!import.meta.env.PROD\
        ? [\
            {\
              type: 'module',\
              children: `import RefreshRuntime from "/@react-refresh"\
  RefreshRuntime.injectIntoGlobalHook(window)\
  window.$RefreshReg$ = () => {}\
  window.$RefreshSig$ = () => (type) => type\
  window.__vite_plugin_react_preamble_installed__ = true`,\
            },\
            {\
              type: 'module',\
              src: '/@vite/client',\
            },\
          ]\
        : []),\
      {\
        type: 'module',\
        src: import.meta.env.PROD\
          ? '/static/entry-client.js'\
          : '/src/entry-client.tsx',\
      },\
    ],
  }),
  component: RootComponent,
})

function RootComponent() {
  return (
    <html lang="en">
      <head>
        <HeadContent />
      </head>
      <body>
        <div className="p-2 flex gap-2 text-lg">
          <Link
            to="/"
            activeProps={{
              className: 'font-bold',
            }}
            activeOptions={{ exact: true }}
          >
            Home
          </Link>{' '}
          <Link
            to="/posts"
            activeProps={{
              className: 'font-bold',
            }}
          >
            Posts
          </Link>{' '}
          <Link
            to="/error"
            activeProps={{
              className: 'font-bold',
            }}
          >
            Error
          </Link>
        </div>
        <hr />
        <Outlet /> {/* Start rendering router matches */}
        <TanStackRouterDevtools position="bottom-right" />
        <Scripts />
      </body>
    </html>
  )
}


import { TanStackRouterDevtools } from '@tanstack/react-router-devtools'
import * as React from 'react'
import {
  HeadContent,
  Link,
  Outlet,
  Scripts,
  createRootRouteWithContext,
} from '@tanstack/react-router'
import type { RouterContext } from '../routerContext'

export const Route = createRootRouteWithContext<RouterContext>()({
  head: () => ({
    links: [{ rel: 'icon', href: '/images/favicon.ico' }],
    meta: [\
      {\
        title: 'TanStack Router SSR Basic File Based Streaming',\
      },\
      {\
        charSet: 'UTF-8',\
      },\
      {\
        name: 'viewport',\
        content: 'width=device-width, initial-scale=1.0',\
      },\
    ],
    scripts: [\
      {\
        src: 'https://unpkg.com/@tailwindcss/browser@4',\
      },\
      ...(!import.meta.env.PROD\
        ? [\
            {\
              type: 'module',\
              children: `import RefreshRuntime from "/@react-refresh"\
  RefreshRuntime.injectIntoGlobalHook(window)\
  window.$RefreshReg$ = () => {}\
  window.$RefreshSig$ = () => (type) => type\
  window.__vite_plugin_react_preamble_installed__ = true`,\
            },\
            {\
              type: 'module',\
              src: '/@vite/client',\
            },\
          ]\
        : []),\
      {\
        type: 'module',\
        src: import.meta.env.PROD\
          ? '/static/entry-client.js'\
          : '/src/entry-client.tsx',\
      },\
    ],
  }),
  component: RootComponent,
})

function RootComponent() {
  return (
    <html lang="en">
      <head>
        <HeadContent />
      </head>
      <body>
        <div className="p-2 flex gap-2 text-lg">
          <Link
            to="/"
            activeProps={{
              className: 'font-bold',
            }}
            activeOptions={{ exact: true }}
          >
            Home
          </Link>{' '}
          <Link
            to="/posts"
            activeProps={{
              className: 'font-bold',
            }}
          >
            Posts
          </Link>{' '}
          <Link
            to="/error"
            activeProps={{
              className: 'font-bold',
            }}
          >
            Error
          </Link>
        </div>
        <hr />
        <Outlet /> {/* Start rendering router matches */}
        <TanStackRouterDevtools position="bottom-right" />
        <Scripts />
      </body>
    </html>
  )
}

Basic + SSR (file-based)

Kitchen Sink (file-based)

Partners Become a Partner

scarf analytics