router
router copied to clipboard
TanStack
nitro with vite preview
[!NOTE]
Awaiting fetch handler in nitro v3
[!CAUTION]
Not compatible with nitro v2 plugin
Adds Nitro v3 support for prerendering using vite.preview()
- Add prerender-nitro.ts - prerendering implementation using vite.preview() for Nitro builds
- Register a Nitro module via the plugin.nitro interop (Nitro v3.0.1-alpha.1 feature, so would break for any prior releases incl. v2)
- Skip default prerendering when Nitro is detected, defer to post-Nitro-build hook
Add e2e tests for Nitro integration:
- react-start/basic-nitro - SSR + prerendering with Nitro
- react-start/basic-nitro-spa - SPA shell prerendering with Nitro
- solid-start/basic-nitro - SSR + prerendering with Nitro
- solid-start/basic-nitro-spa - SPA shell prerendering with Nitro
closes https://github.com/TanStack/router/issues/5967
- https://github.com/TanStack/router/issues/5967
might close
- https://github.com/TanStack/router/issues/5939
- https://github.com/nitrojs/nitro/issues/3741)
Summary by CodeRabbit
-
New Features
- New React and Solid e2e templates: Nitro-powered SPA/SSR with app shell, routing, error & not-found UIs, SEO helper, PWA manifest, and global styling.
-
Core
- Core plugin now integrates Nitro-aware prerender support and emits Nitro build info to enable correct preview/prerender flows.
-
Tests
- Playwright e2e suites added to verify prerendering, server/runtime responses, and client-side navigation.
-
Chores
- Project configs, package manifests, build/test scripts, PostCSS/Vite/Nitro setup, and ignore rules added.
✏️ Tip: You can customize this high-level summary in your review settings.
Walkthrough
Adds multiple e2e example projects (React & Solid; SPA and Nitro variants) with routes, components, configs, and Playwright tests; and extends start-plugin-core to detect Nitro and support Nitro-backed prerendering alongside Vite preview.
Changes
| Cohort / File(s) | Summary |
|---|---|
React Start SPA example e2e/react-start/basic-nitro-spa/.gitignore, e2e/react-start/basic-nitro-spa/package.json, e2e/react-start/basic-nitro-spa/playwright.config.ts, e2e/react-start/basic-nitro-spa/postcss.config.mjs, e2e/react-start/basic-nitro-spa/public/site.webmanifest, e2e/react-start/basic-nitro-spa/tsconfig.json, e2e/react-start/basic-nitro-spa/vite.config.ts |
New SPA project scaffolding: package manifest, Playwright config, PostCSS/Tailwind config, manifest, TS config, Vite config wired to TanStack Start and Nitro. |
React Start SPA app code & tests e2e/react-start/basic-nitro-spa/src/routes/__root.tsx, .../src/routes/index.tsx, .../src/routes/static.tsx, .../src/components/DefaultCatchBoundary.tsx, .../src/components/NotFound.tsx, .../src/router.tsx, .../src/routeTree.gen.ts, .../src/styles/app.css, .../src/utils/seo.ts, .../tests/app.spec.ts |
Adds file-based routes, generated route tree/types, router factory, error/not-found components, SEO util, styles, and Playwright e2e tests for SPA prerender and client navigation. |
React Start Nitro example e2e/react-start/basic-nitro/.gitignore, e2e/react-start/basic-nitro/.prettierignore, e2e/react-start/basic-nitro/package.json, e2e/react-start/basic-nitro/playwright.config.ts, e2e/react-start/basic-nitro/postcss.config.mjs, e2e/react-start/basic-nitro/public/site.webmanifest, e2e/react-start/basic-nitro/tsconfig.json, e2e/react-start/basic-nitro/vite.config.ts |
Full-stack Nitro example scaffolding with Playwright config, Vite/Nitro integration, and formatting ignores for generated files. |
React Start Nitro app code & tests e2e/react-start/basic-nitro/src/routes/__root.tsx, .../src/routes/index.tsx, .../src/routes/static.tsx, .../src/components/DefaultCatchBoundary.tsx, .../src/components/NotFound.tsx, .../src/router.tsx, .../src/routeTree.gen.ts, .../src/styles/app.css, .../src/utils/seo.ts, .../tests/app.spec.ts, .../tests/setup/global.setup.ts, .../tests/setup/global.teardown.ts |
Adds Nitro-backed routes, generated route tree with typings, router factory, components, styles, SEO util, Playwright tests validating Nitro runtime and prerendered assets, plus test setup/teardown placeholders. |
Solid Start SPA example e2e/solid-start/basic-nitro-spa/.gitignore, e2e/solid-start/basic-nitro-spa/package.json, e2e/solid-start/basic-nitro-spa/playwright.config.ts, e2e/solid-start/basic-nitro-spa/postcss.config.mjs, e2e/solid-start/basic-nitro-spa/public/site.webmanifest, e2e/solid-start/basic-nitro-spa/tsconfig.json, e2e/solid-start/basic-nitro-spa/vite.config.ts |
New Solid Start SPA project scaffolding: package manifest, Playwright config, PostCSS/Tailwind, TS config, and Vite + Solid plugin wiring. |
Solid Start SPA app code & tests e2e/solid-start/basic-nitro-spa/src/routes/__root.tsx, .../src/routes/index.tsx, .../src/routes/static.tsx, .../src/components/DefaultCatchBoundary.tsx, .../src/components/NotFound.tsx, .../src/router.tsx, .../src/routeTree.gen.ts, .../src/styles/app.css, .../src/utils/seo.ts, .../tests/app.spec.ts |
Adds Solid file-based routes, generated route tree/types, router factory, error/not-found components, SEO util, styles, and Playwright e2e tests for SPA prerender/navigation. |
Solid Start Nitro example e2e/solid-start/basic-nitro/.gitignore, e2e/solid-start/basic-nitro/.prettierignore, e2e/solid-start/basic-nitro/package.json, e2e/solid-start/basic-nitro/playwright.config.ts, e2e/solid-start/basic-nitro/postcss.config.mjs, e2e/solid-start/basic-nitro/public/site.webmanifest, e2e/solid-start/basic-nitro/tsconfig.json, e2e/solid-start/basic-nitro/vite.config.ts |
Full-stack Solid + Nitro example scaffolding with Playwright config, Vite/Nitro plugin setup, and Prettier ignore for generated route trees. |
Solid Start Nitro app code & tests e2e/solid-start/basic-nitro/src/routes/__root.tsx, .../src/routes/index.tsx, .../src/routes/static.tsx, .../src/components/DefaultCatchBoundary.tsx, .../src/components/NotFound.tsx, .../src/router.tsx, .../src/routeTree.gen.ts, .../src/styles/app.css, .../src/utils/seo.ts, .../tests/app.spec.ts |
Adds Solid Nitro routes, generated route tree with type augmentations, router factory, components, styles, SEO helper, and Playwright tests for prerendered static pages and client navigation. |
Start Plugin Core — prerender & Nitro integration packages/start-plugin-core/src/plugin.ts, packages/start-plugin-core/src/post-server-build.ts, packages/start-plugin-core/src/prerender.ts |
Adds viteConfigFile to resolved config and configResolved hook; detects Nitro plugin presence; introduces Nitro-specific prerender plugin and postServerBuildForNitro; refactors postServerBuild to accept skipPrerender; updates prerender to optionally start a Nitro subprocess (startNitroServer) or use Vite preview, plus improved redirect/cleanup handling and nitro.json write-out. |
Sequence Diagram(s)
mermaid sequenceDiagram autonumber participant Vite as Vite (build/config) participant Plugin as tanstack-start-core plugin participant Nitro as Nitro server (child process) participant Prerender as Prerender worker participant FS as Filesystem (.output)
Vite->>Plugin: configResolved (configFile)
Vite->>Plugin: build finished
Plugin->>Plugin: detect Nitro plugin (plugin.name startsWith "nitro:")
Plugin->>Prerender: invoke postServerBuildForNitro(startConfig, outputDir, configFile)
Prerender->>Nitro: startNitroServer(nitroServerPath, PORT)
Nitro-->>Prerender: ready (base URL)
Prerender->>Nitro: crawl pages (HTTP requests)
Prerender->>FS: write prerendered files into outputDir
Prerender->>Nitro: close()
Prerender-->>Plugin: prerender complete / sitemap generation
Estimated code review effort
🎯 4 (Complex) | ⏱️ ~45 minutes
- Areas needing extra attention:
- packages/start-plugin-core/src/prerender.ts — Nitro subprocess orchestration, waitForServerReady, redirect handling, cleanup.
- packages/start-plugin-core/src/plugin.ts — configResolved hook, viteConfigFile propagation, Nitro detection and plugin lifecycle changes.
- packages/start-plugin-core/src/post-server-build.ts — postServerBuildForNitro, skipPrerender propagation, nitro.json write-out.
- Generated routeTree.gen.ts files across examples — type augmentations, consistent IDs/parent relationships.
- Playwright webServer configs in e2e examples — port resolution, reuseExistingServer behavior, and server start commands.
Possibly related PRs
- TanStack/router#5921 — modifies prerender/post-server-build flows to support Nitro-backed prerendering; directly related to start-plugin-core changes.
- TanStack/router#5849 — adds similar Solid Start example files (routeTree and router), overlapping generated routes and router factory.
- TanStack/router#5577 — adds similar example scaffolding (routeTree.gen.ts, router, routes, components) closely matching the e2e app additions.
Suggested labels
ssr
Suggested reviewers
- schiller-manuel
Poem
🐰 I hopped through routes and built a plot,
Brought Nitro warmth and prerendered lot.
React and Solid, tests all in a row,
Pages pre-made, and devtools a-glow.
Hooray — carrots for everyone, let's go! 🥕
Pre-merge checks and finishing touches
❌ Failed checks (1 warning)
| Check name | Status | Explanation | Resolution |
|---|---|---|---|
| Docstring Coverage | ⚠️ Warning | Docstring coverage is 2.94% which is insufficient. The required threshold is 80.00%. | You can run @coderabbitai generate docstrings to improve docstring coverage. |
✅ Passed checks (2 passed)
| Check name | Status | Explanation |
|---|---|---|
| Title check | ✅ Passed | The title 'nitro with vite preview' directly refers to the main purpose of the PR, which adds Nitro v3 support for prerendering using vite.preview(). |
| Description Check | ✅ Passed | Check skipped - CodeRabbit’s high-level summary is enabled. |
✨ Finishing touches
- [ ] 📝 Generate docstrings
🧪 Generate unit tests (beta)
- [ ] Create PR with unit tests
- [ ] Post copyable unit tests in a comment
- [ ] Commit unit tests in branch
nitro-with-vite-preview
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.
Comment @coderabbitai help to get the list of available commands and usage tips.
![coderabbitai[bot] avatar](https://avatars.githubusercontent.com/in/347564?v=4 "Published by a pub.dev verified publisher"){kind=small}
View your CI Pipeline Execution ↗ for commit b17e4b6f6c7317dafb48e7000c04944e908e1f79
| Command | Status | Duration | Result |
|---|---|---|---|
nx affected --targets=test:eslint,test:unit,tes... |
✅ Succeeded | 7m 27s | View ↗ |
nx run-many --target=build --exclude=examples/*... |
✅ Succeeded | 18s | View ↗ |
☁️ Nx Cloud last updated this comment at 2025-11-28 01:41:56 UTC
![nx-cloud[bot] avatar](https://avatars.githubusercontent.com/in/80458?v=4 "Published by a pub.dev verified publisher"){kind=small}
More templates
- tanstack-router-react-example-authenticated-routes
- tanstack-router-react-example-authenticated-routes-firebase
- tanstack-router-react-example-basic
- tanstack-router-react-example-basic-default-search-params
- tanstack-router-react-example-basic-devtools-panel
- tanstack-router-react-example-basic-file-based
- tanstack-router-react-example-basic-non-nested-devtools
- tanstack-router-react-example-react-query
- tanstack-router-react-example-basic-react-query-file-based
- tanstack-router-react-example-basic-ssr-file-based
- tanstack-router-react-example-basic-ssr-streaming-file-based
- tanstack-router-react-example-basic-virtual-file-based
- tanstack-router-react-example-basic-virtual-inside-file-based
- tanstack-router-react-example-deferred-data
- tanstack-router-i18n-paraglide
- tanstack-router-react-example-kitchen-sink
- tanstack-router-react-example-kitchen-sink-file-based
- tanstack-router-react-example-kitchen-sink-react-query
- tanstack-router-react-example-kitchen-sink-react-query-file-based
- tanstack-router-react-example-large-file-based
- tanstack-router-react-example-location-masking
- tanstack-router-react-example-navigation-blocking
- tanstack-router-react-example-quickstart
- tanstack-router-react-example-quickstart-esbuild-file-based
- tanstack-router-react-example-quickstart-file-based
- tanstack-router-react-example-quickstart-rspack-file-based
- tanstack-router-react-example-quickstart-webpack-file-based
- router-monorepo-react-query
- router-mono-simple
- router-mono-simple-lazy
- tanstack-router-react-example-scroll-restoration
- tanstack-search-validator-adapters
- tanstack-start-example-bare
- tanstack-start-example-basic
- tanstack-start-example-basic-auth
- tanstack-router-react-example-basic-authjs
- tanstack-start-example-basic-cloudflare
- tanstack-start-example-basic-react-query
- tanstack-start-example-basic-static
- tanstack-start-bun-hosting
- tanstack-start-example-clerk-basic
- tanstack-start-example-convex-trellaux
- tanstack-start-example-counter
- tanstack-start-i18n-paraglide
- tanstack-start-example-large
- tanstack-start-example-material-ui
- tanstack-start-streaming-data-from-server-functions
- tanstack-start-example-supabase-basic
- tanstack-start-tailwind-v4
- tanstack-start-example-trellaux
- tanstack-start-example-workos
- tanstack-router-react-example-view-transitions
- tanstack-router-react-example-with-framer-motion
- tanstack-router-react-example-with-trpc
- tanstack-router-react-example-with-trpc-react-query
- tanstack-router-solid-example-authenticated-routes
- tanstack-router-solid-example-authenticated-routes-firebase
- tanstack-router-solid-example-basic
- tanstack-router-solid-example-basic-default-search-params
- tanstack-router-solid-example-basic-devtools-panel
- tanstack-router-solid-example-basic-file-based
- tanstack-router-solid-example-basic-non-nested-devtools
- tanstack-router-solid-example-basic-solid-query
- tanstack-router-solid-example-basic-solid-query-file-based
- tanstack-router-solid-example-basic-ssr-file-based
- tanstack-router-solid-example-basic-ssr-streaming-file-based
- tanstack-router-solid-example-basic-virtual-file-based
- tanstack-router-solid-example-basic-virtual-inside-file-based
- tanstack-router-solid-example-deferred-data
- tanstack-router-solid-i18n-paraglide
- tanstack-router-solid-example-kitchen-sink
- tanstack-router-solid-example-kitchen-sink-file-based
- tanstack-router-solid-example-kitchen-sink-solid-query
- tanstack-router-solid-example-kitchen-sink-solid-query-file-based
- tanstack-router-solid-example-large-file-based
- tanstack-router-solid-example-location-masking
- tanstack-router-solid-example-navigation-blocking
- tanstack-router-solid-example-quickstart
- tanstack-router-solid-example-quickstart-esbuild-file-based
- tanstack-router-solid-example-quickstart-file-based
- tanstack-router-solid-example-quickstart-rspack-file-based
- tanstack-router-solid-example-quickstart-webpack-file-based
- router-solid-mono-simple
- router-solid-mono-simple-lazy
- router-solid-monorepo-solid-query
- tanstack-router-solid-example-scroll-restoration
- tanstack-solid-router-search-validator-adapters
- tanstack-solid-start-example-basic
- tanstack-solid-start-example-basic-auth
- tanstack-solid-start-example-basic-authjs
- tanstack-solid-start-example-basic-cloudflare
- tanstack-solid-start-example-basic-netlify
- tanstack-solid-start-example-basic-nitro
- tanstack-start-example-basic-solid-query
- tanstack-solid-start-example-basic-static
- tanstack-solid-start-bun-hosting
- tanstack-solid-start-example-convex-better-auth
- tanstack-solid-start-example-counter
- tanstack-solid-start-i18n-paraglide
- tanstack-solid-start-example-large
- tanstack-solid-start-streaming-data-from-server-functions
- tanstack-solid-start-example-supabase-basic
- tanstack-solid-start-tailwind-v4
- tanstack-router-solid-example-view-transitions
- tanstack-router-solid-example-with-framer-motion
- tanstack-router-solid-example-with-trpc
@tanstack/arktype-adapter
npm i https://pkg.pr.new/TanStack/router/@tanstack/arktype-adapter@5983
@tanstack/directive-functions-plugin
npm i https://pkg.pr.new/TanStack/router/@tanstack/directive-functions-plugin@5983
@tanstack/eslint-plugin-router
npm i https://pkg.pr.new/TanStack/router/@tanstack/eslint-plugin-router@5983
@tanstack/history
npm i https://pkg.pr.new/TanStack/router/@tanstack/history@5983
@tanstack/nitro-v2-vite-plugin
npm i https://pkg.pr.new/TanStack/router/@tanstack/nitro-v2-vite-plugin@5983
@tanstack/react-router
npm i https://pkg.pr.new/TanStack/router/@tanstack/react-router@5983
@tanstack/react-router-devtools
npm i https://pkg.pr.new/TanStack/router/@tanstack/react-router-devtools@5983
@tanstack/react-router-ssr-query
npm i https://pkg.pr.new/TanStack/router/@tanstack/react-router-ssr-query@5983
@tanstack/react-start
npm i https://pkg.pr.new/TanStack/router/@tanstack/react-start@5983
@tanstack/react-start-client
npm i https://pkg.pr.new/TanStack/router/@tanstack/react-start-client@5983
@tanstack/react-start-server
npm i https://pkg.pr.new/TanStack/router/@tanstack/react-start-server@5983
@tanstack/router-cli
npm i https://pkg.pr.new/TanStack/router/@tanstack/router-cli@5983
@tanstack/router-core
npm i https://pkg.pr.new/TanStack/router/@tanstack/router-core@5983
@tanstack/router-devtools
npm i https://pkg.pr.new/TanStack/router/@tanstack/router-devtools@5983
@tanstack/router-devtools-core
npm i https://pkg.pr.new/TanStack/router/@tanstack/router-devtools-core@5983
@tanstack/router-generator
npm i https://pkg.pr.new/TanStack/router/@tanstack/router-generator@5983
@tanstack/router-plugin
npm i https://pkg.pr.new/TanStack/router/@tanstack/router-plugin@5983
@tanstack/router-ssr-query-core
npm i https://pkg.pr.new/TanStack/router/@tanstack/router-ssr-query-core@5983
@tanstack/router-utils
npm i https://pkg.pr.new/TanStack/router/@tanstack/router-utils@5983
@tanstack/router-vite-plugin
npm i https://pkg.pr.new/TanStack/router/@tanstack/router-vite-plugin@5983
@tanstack/server-functions-plugin
npm i https://pkg.pr.new/TanStack/router/@tanstack/server-functions-plugin@5983
@tanstack/solid-router
npm i https://pkg.pr.new/TanStack/router/@tanstack/solid-router@5983
@tanstack/solid-router-devtools
npm i https://pkg.pr.new/TanStack/router/@tanstack/solid-router-devtools@5983
@tanstack/solid-router-ssr-query
npm i https://pkg.pr.new/TanStack/router/@tanstack/solid-router-ssr-query@5983
@tanstack/solid-start
npm i https://pkg.pr.new/TanStack/router/@tanstack/solid-start@5983
@tanstack/solid-start-client
npm i https://pkg.pr.new/TanStack/router/@tanstack/solid-start-client@5983
@tanstack/solid-start-server
npm i https://pkg.pr.new/TanStack/router/@tanstack/solid-start-server@5983
@tanstack/start-client-core
npm i https://pkg.pr.new/TanStack/router/@tanstack/start-client-core@5983
@tanstack/start-plugin-core
npm i https://pkg.pr.new/TanStack/router/@tanstack/start-plugin-core@5983
@tanstack/start-server-core
npm i https://pkg.pr.new/TanStack/router/@tanstack/start-server-core@5983
@tanstack/start-static-server-functions
npm i https://pkg.pr.new/TanStack/router/@tanstack/start-static-server-functions@5983
@tanstack/start-storage-context
npm i https://pkg.pr.new/TanStack/router/@tanstack/start-storage-context@5983
@tanstack/valibot-adapter
npm i https://pkg.pr.new/TanStack/router/@tanstack/valibot-adapter@5983
@tanstack/virtual-file-routes
npm i https://pkg.pr.new/TanStack/router/@tanstack/virtual-file-routes@5983
@tanstack/zod-adapter
npm i https://pkg.pr.new/TanStack/router/@tanstack/zod-adapter@5983
commit: b17e4b6
![pkg-pr-new[bot] avatar](https://avatars.githubusercontent.com/in/882742?v=4 "Published by a pub.dev verified publisher"){kind=small}
Hey! @birkskyum Thank you for working on this! What are the next steps, what still need to be fixed before merging this?
