T
TanStack•2w ago
criminal-purple

SSR disabling doesn't work

I'd like to generate blog during the build and never refetch this data again (SSG / prerender or however u wanna call it) With this configuration every after running pnpm build && pnpm serve each request still triggers this 5s timeout so ssr wasn't disabled for some reason. Am I doing something wrong? 
export const Route = createFileRoute("/blog")({
    component: RouteComponent,
    ssr: false,
    loader: async () => {
        console.log("loading blog route");
        await new Promise((r) => setTimeout(r, 5000));
        return [
            {
                title: "Blog",
                description: "Blog description",
            },
            {
                title: "Blog 2",
                description: "Blog description 2",
            },
            {
                title: "Blog 3",
                description: "Blog description 3",
            },
        ];
    },
});
export const Route = createFileRoute("/blog")({
    component: RouteComponent,
    ssr: false,
    loader: async () => {
        console.log("loading blog route");
        await new Promise((r) => setTimeout(r, 5000));
        return [
            {
                title: "Blog",
                description: "Blog description",
            },
            {
                title: "Blog 2",
                description: "Blog description 2",
            },
            {
                title: "Blog 3",
                description: "Blog description 3",
            },
        ];
    },
});
import { defineConfig } from 'vite'
import { devtools } from '@tanstack/devtools-vite'
import { tanstackStart } from '@tanstack/react-start/plugin/vite'
import viteReact from '@vitejs/plugin-react'
import viteTsConfigPaths from 'vite-tsconfig-paths'
import tailwindcss from '@tailwindcss/vite'
import { nitro } from 'nitro/vite'

const config = defineConfig({
  plugins: [
    devtools(),
    nitro(),
    // this is the plugin that enables path aliases
    viteTsConfigPaths({
      projects: ['./tsconfig.json'],
    }),
    tailwindcss(),
    tanstackStart({
      prerender: {
        enabled: true,
        filter: ({ path }) => path.includes('blog'),
      },
    }),
    viteReact({
      babel: {
        plugins: ['babel-plugin-react-compiler'],
      },
    }),
  ],
})

export default config
import { defineConfig } from 'vite'
import { devtools } from '@tanstack/devtools-vite'
import { tanstackStart } from '@tanstack/react-start/plugin/vite'
import viteReact from '@vitejs/plugin-react'
import viteTsConfigPaths from 'vite-tsconfig-paths'
import tailwindcss from '@tailwindcss/vite'
import { nitro } from 'nitro/vite'

const config = defineConfig({
  plugins: [
    devtools(),
    nitro(),
    // this is the plugin that enables path aliases
    viteTsConfigPaths({
      projects: ['./tsconfig.json'],
    }),
    tailwindcss(),
    tanstackStart({
      prerender: {
        enabled: true,
        filter: ({ path }) => path.includes('blog'),
      },
    }),
    viteReact({
      babel: {
        plugins: ['babel-plugin-react-compiler'],
      },
    }),
  ],
})

export default config
17 Replies
criminal-purple
criminal-purpleOP•2w ago
So I think I am missing something and I should be using https://tanstack.com/start/latest/docs/framework/react/guide/static-server-functions But still why do I need any JSONs? I just want this html to be static 
Runtime

Initially, the prerendered page's html is served and the server function data is embedded in the html
When the client mounts, the embedded server function data is hydrated
For future client-side invocations, the server function is replaced with a fetch call to the static JSON file
Runtime

Initially, the prerendered page's html is served and the server function data is embedded in the html
When the client mounts, the embedded server function data is hydrated
For future client-side invocations, the server function is replaced with a fetch call to the static JSON file
Static Server Functions | TanStack Start React Docs
[!WARNING] Static Server Functions are experimental! What are Static Server Functions? Static server functions are server functions that are executed at build time and cached as static assets when usi...
criminal-purple
criminal-purpleOP•2w ago
Becuase this still means in a loder we call something to obtain the data for a page that was SSG'ed And I don't want that.
other-emerald
other-emerald•2w ago
then don't render Scripts
criminal-purple
criminal-purpleOP•2w ago
Can u elaborate? @Manuel Schiller I don't understand what rendering the scripts has to do with it?
other-emerald
other-emerald•2w ago
Scripts component will hydrate your app if you want a fully static site, don't render that component
criminal-purple
criminal-purpleOP•2w ago
What if i want one static site
other-emerald
other-emerald•2w ago
then all links will be hard links
criminal-purple
criminal-purpleOP•2w ago
and all the other as it is?
other-emerald
other-emerald•2w ago
static as in what?
criminal-purple
criminal-purpleOP•2w ago
As I said goal is to have CSR as it is and one fully static site generated during build Imagine this blog site that fetches data during build and only there
other-emerald
other-emerald•2w ago
ok then prerender just the site you want
criminal-purple
criminal-purpleOP•2w ago
I am doing it but data is fetchedin the loader And loader also runs during hydration So I need something like loader that runs only during build and this is what I am struggling to achieve
other-emerald
other-emerald•2w ago
loader should never run during hydration as it already ran during prerender
criminal-purple
criminal-purpleOP•2w ago
It does in the examples I sent above
other-emerald
other-emerald•2w ago
can you please provide this as a complete project I can clone ?
criminal-purple
criminal-purpleOP•2w ago
https://github.com/stachujone5/tanstack-start-prerender-repro
GitHub
GitHub - stachujone5/tanstack-start-prerender-repro
Contribute to stachujone5/tanstack-start-prerender-repro development by creating an account on GitHub.
criminal-purple
criminal-purpleOP•2w ago
That's the reproduction -> when I build this project and go to prerenderd blog page when I inspect HTML it's not prerendered - body is empty. Loader (5s) timeout runs on every request. Goal is to have / and /vip CSR -> disabled SSR (that is set when creating route) so loaders should run only client side and /blog should not run loader on the client but just when building the project @Manuel Schiller And half of the behviour I want can be achived by settings ssr: true on the /blog route then HTML body is prerendered properly and when I go initially to localhost:3000/blog Loader is not invoked however when I go to localhost:3000 and from there I click /blog link I wait 5s because loader runs on the client. so anyone?

Did you find this page helpful?