TanStackT
TanStack5w ago
2 replies
spotty-amber

Strange `beforeLoad` behavior during SSR, and other questions about selective SSR + prerendering

Is there anyone here that could clarify Selective SSR vs SPA Mode vs PreRender? Im seeing somewhat strange behavior after trying to apply what I read from the docs, https://tanstack.com/start/latest/docs/framework/react/guide/selective-ssr#ssr-true

On my /login page (a login screen), I have a
beforeLoad
that checks for the auth state and automatically redirects to /app (the authenticated dashboard) if the user is already logged in according to Better Auth. However, when the page uses SSR the
beforeLoad
function doesnt seem to fire on the client at all. I can work around the issue by just setting ssr: false, but Id prefer to prerender or SSR this page since its pretty much static. Not sure if this is a bug? Im on router + start version 1.140.0

---
On a more broad level, Im really trying to figure out how to enable the below setup within a single Tanstack app
- The authenticated /app routes should never pre-render or SSR and can just function like a client-side SPA. I think I can achieve this by simply setting ssr: false on the layout route within my (app) directory containing all the authenticated routes.
- My app also has public-facing blog posts and support documentation, which should ssr and have long-term cache headers since pre-rendering them seems like it would slow the app's build step drastically as the amount of blogs/docs increases over time
- The app also includes static marketing pages such as
/
(the landing page),
/about
, and /pricing and I think it'd be safe to fully prerender these since the overall amount of these pages should stay pretty low in the long-term. Worst case scenario, they could use the same SSR + heavy caching strategy as the blogs/docs.

I think I understand how to solve that last prerender bullet already, since adding prerender: options_here to the Start Vite plugin seems to work, but I've been unable to get the overall setup working as expected.
What is Selective SSR? In TanStack Start, routes matching the initial request are rendered on the server by default. This means beforeLoad and loader are executed on the server, followed by rendering...
Selective Server-Side Rendering (SSR) | TanStack Start React Docs
Was this page helpful?