Hybrid SSR + SPA in TanStack Start?
I currently maintain two separate projects that are organized in a monorepo:
• A TanStack Start app (SSR) that serves as an admin/dashboard for configuring my main app
• A TanStack Router SPA for the core user-facing experience (client-side routing only, for performance and offline support)
I’d like to consolidate them into a single codebase using TanStack Start as the foundation, but still:
• Serve the dashboard routes via SSR
• Serve the main app routes entirely on the client (SPA) with TanStack Router
Has anyone successfully done this “hybrid” routing setup with TanStack Start+Router? If so:
• How did you split your route definitions (filesystem vs. client router)?
• How do you bootstrap the client–only router inside a subset of the SSR app?
• Any special loader/action considerations or pitfalls around data fetching, code-splitting or offline support?
• Best practices for folder structure / entry points?
I’ve seen examples in Next.js, Theo and t3.chat’s hybrid patterns (https://www.youtube.com/watch?v=QLvIoi2s1zY&t=238s) and Josh tried coding (https://x.com/joshtriedcoding/status/1921886068342731149), but I’m not sure how to translate that to TanStack’s router and Start framework. Any guidance, code samples or pointers to relevant docs would be hugely appreciated!
• A TanStack Start app (SSR) that serves as an admin/dashboard for configuring my main app
• A TanStack Router SPA for the core user-facing experience (client-side routing only, for performance and offline support)
I’d like to consolidate them into a single codebase using TanStack Start as the foundation, but still:
• Serve the dashboard routes via SSR
• Serve the main app routes entirely on the client (SPA) with TanStack Router
Has anyone successfully done this “hybrid” routing setup with TanStack Start+Router? If so:
• How did you split your route definitions (filesystem vs. client router)?
• How do you bootstrap the client–only router inside a subset of the SSR app?
• Any special loader/action considerations or pitfalls around data fetching, code-splitting or offline support?
• Best practices for folder structure / entry points?
I’ve seen examples in Next.js, Theo and t3.chat’s hybrid patterns (https://www.youtube.com/watch?v=QLvIoi2s1zY&t=238s) and Josh tried coding (https://x.com/joshtriedcoding/status/1921886068342731149), but I’m not sure how to translate that to TanStack’s router and Start framework. Any guidance, code samples or pointers to relevant docs would be hugely appreciated!
YouTubeTheo - t3․gg
I built the fastest AI chat app in 5 days. A lot of y'all asked how. Hopefully this helps answer :)
Thank you CodeRabbit for sponsoring! Check them out at: https://soydev.link/coderabbit
CHECK OUT T3 CHAT: https://t3.chat/
Check out my Twitch, Twitter, Discord more at https://t3.gg
S/O Ph4se0n3 for the awesome edit
Thank you CodeRabbit for sponsoring! Check them out at: https://soydev.link/coderabbit
CHECK OUT T3 CHAT: https://t3.chat/
Check out my Twitch, Twitter, Discord more at https://t3.gg
S/O Ph4se0n3 for the awesome edit
