T
TanStack•3w ago
noble-gold

Prerender not working when using TanStack Start with Nitro v2 plugin

Hi, I’m trying to prerender pages using tanstack-start + Nitro v2 plugin, but prerendering doesn’t generate any static output. Here’s my vite.config.ts: 
// vite.config.ts
import { defineConfig } from "vite"
import react from "@vitejs/plugin-react"
import tsConfigPaths from "vite-tsconfig-paths"
import tailwindcss from "@tailwindcss/vite"
import { tanstackStart } from "@tanstack/react-start/plugin/vite"
import nitroV2Plugin from "@tanstack/nitro-v2-vite-plugin"

export default defineConfig(async () => ({
  plugins: [    
    tailwindcss(),
    tsConfigPaths({
      projects: ["./tsconfig.json"],
    }),
    tanstackStart(),
    nitroV2Plugin({
      prerender: {
        routes: ["/docs"], // expecting static output for /docs
      },
    }),
    react(),
  ],
}))
// vite.config.ts
import { defineConfig } from "vite"
import react from "@vitejs/plugin-react"
import tsConfigPaths from "vite-tsconfig-paths"
import tailwindcss from "@tailwindcss/vite"
import { tanstackStart } from "@tanstack/react-start/plugin/vite"
import nitroV2Plugin from "@tanstack/nitro-v2-vite-plugin"

export default defineConfig(async () => ({
  plugins: [    
    tailwindcss(),
    tsConfigPaths({
      projects: ["./tsconfig.json"],
    }),
    tanstackStart(),
    nitroV2Plugin({
      prerender: {
        routes: ["/docs"], // expecting static output for /docs
      },
    }),
    react(),
  ],
}))
Expected: Nitro prerenders /docs into a static HTML file. Actual: The build finishes successfully, but only the server output is generated (.output/server). No prerendered HTML files are created. Has anyone successfully used prerendering with Nitro v2 + tanstack-start? Any hints would be appreciated. 🙏
3 Replies
other-emerald
other-emerald•3w ago
does it work with the nitro v3 plugin?
noble-gold
noble-goldOP•3w ago
Yes it works. Here's my config: 
 
import tailwindcss from "@tailwindcss/vite";
import { tanstackStart } from "@tanstack/react-start/plugin/vite";
import react from "@vitejs/plugin-react";
import { defineConfig } from "vite";
import tsConfigPaths from "vite-tsconfig-paths";
import { nitro } from 'nitro/vite'

export default defineConfig({
  server: {
    port: 3000,
  },
  plugins: [
    tailwindcss(),
    tsConfigPaths({
      projects: ["./tsconfig.json"],
    }),
    tanstackStart({
        prerender: {
            enabled: true,
        }
    }),
    nitro(),
    react(),
  ],
});
 
import tailwindcss from "@tailwindcss/vite";
import { tanstackStart } from "@tanstack/react-start/plugin/vite";
import react from "@vitejs/plugin-react";
import { defineConfig } from "vite";
import tsConfigPaths from "vite-tsconfig-paths";
import { nitro } from 'nitro/vite'

export default defineConfig({
  server: {
    port: 3000,
  },
  plugins: [
    tailwindcss(),
    tsConfigPaths({
      projects: ["./tsconfig.json"],
    }),
    tanstackStart({
        prerender: {
            enabled: true,
        }
    }),
    nitro(),
    react(),
  ],
});
and now how I verify prerender works ?
other-emerald
other-emerald•3w ago
add some logs to your components for example, they should print in the server terminal during prerendering but not when serving the initial request (hard reload) so SSR should not happen for those

Did you find this page helpful?