magic-amber

Static site generation

https://x.com/tannerlinsley/status/1887914853215649947 How can I do static site generation (html files) when deplyong to Vercel? I'm aware of this https://tanstack.com/start/latest/docs/framework/react/guide/static-prerendering but it seems to only work when I do NOT use the nitro plugin on vite.config.ts

Tanner Linsley (@tannerlinsley)

This @Tan_Stack Start app uses createServerFn/'use server', but is completely static. No server other than CDN. https://t.co/aIQeoTcVWn

Static Prerendering | TanStack Start React Docs

Static prerendering is the process of generating static HTML files for your application. This can be useful for either improving the performance of your application, as it allows you to serve pre-rend...

22 Replies

magic-amberOP•2mo ago

this is my current config export default defineConfig({ server: { port: 3000, }, preview: { port: 3000, }, plugins: [ tanstackStart(), nitroV2Plugin({ preset: process.env.VERCEL ? "vercel" : "node-server", compatibilityDate: "2025-10-20", }), viteReact(), // this is the plugin that enables path aliases viteTsConfigPaths({ projects: ["./tsconfig.json"], }), contentCollections(), tailwindcss(), ], });

ugly-tan•2mo ago

can you please try with nitro v3 ?

magic-amberOP•5w ago

@Manuel Schiller I tried and got the pre-render to show up. However, it doesn't seem to work? I disabled javascript on the browser and the page doesn't load. Same result both locally and deployed to Vercel.

export default defineConfig({
    server: {
        port: 3000,
    },
    preview: {
        port: 3000,
    },
    plugins: [
        tanstackStart({
            prerender: {
                enabled: true,
                crawlLinks: true,
            },
        }),
        nitro({
            config: {
                preset: process.env.VERCEL ? "vercel" : "node-server",
                compatibilityDate: "2025-10-20",
            },
        }),
        viteReact(),
        // this is the plugin that enables path aliases
        viteTsConfigPaths({
            projects: ["./tsconfig.json"],
        }),
        contentCollections(),
        tailwindcss(),
    ],
});

export default defineConfig({
    server: {
        port: 3000,
    },
    preview: {
        port: 3000,
    },
    plugins: [
        tanstackStart({
            prerender: {
                enabled: true,
                crawlLinks: true,
            },
        }),
        nitro({
            config: {
                preset: process.env.VERCEL ? "vercel" : "node-server",
                compatibilityDate: "2025-10-20",
            },
        }),
        viteReact(),
        // this is the plugin that enables path aliases
        viteTsConfigPaths({
            projects: ["./tsconfig.json"],
        }),
        contentCollections(),
        tailwindcss(),
    ],
});

ugly-tan•5w ago

how does the prerendered html look like?

magic-amberOP•5w ago

on my machine it lives in .output/public/

magic-amberOP•5w ago

magic-amberOP•5w ago

and the htmls contains a lot of things, not an empty shell like the case for a SPA

magic-amberOP•5w ago

ugly-tan•5w ago

you might be affected by this react 19.2 issue https://discord.com/channels/719702312431386674/1431549315809284146/1432363278868287653 if you are using 19.2, try 19.1 instead

magic-amberOP•5w ago

i'm already using 19.1 so that's not it

magic-amberOP•5w ago

ugly-tan•5w ago

then we need full reproducer

magic-amberOP•5w ago

here https://github.com/Chunkygoo/repo-for-static-prerendering

GitHub

GitHub - Chunkygoo/repo-for-static-prerendering

Contribute to Chunkygoo/repo-for-static-prerendering development by creating an account on GitHub.

magic-amberOP•5w ago

I created a new tanstack start app using https://www.npmjs.com/package/@tanstack/create-start then, I switched it to use nitro v3 then, I ran pnpm build, pnpm serve. Go to the index page. open devtools, disable JS. Refresh.

npm

@tanstack/create-start

Tanstack Start Builder. Latest version: 0.34.11, last published: a day ago. Start using @tanstack/create-start in your project by running npm i @tanstack/create-start. There are no other projects in the npm registry using @tanstack/create-start.

magic-amberOP•5w ago

see this:

magic-amberOP•5w ago

if I open the index.html in '.output/public', I get

magic-amberOP•5w ago

which is expected So it seems like it's not using index.html for some reason @Manuel Schiller

ugly-tan•5w ago

its empty

magic-amberOP•5w ago

try again

ugly-tan•5w ago

this uses react 19.2 use 19.1 and it works

magic-amberOP•5w ago

hmm you're right

absent-sapphire•5w ago

Thanks, was having this exact issue and now this resolved it. @Manuel Schiller

Gaming

Programming

Static site generation

Did you find this page helpful?