5 Ways To SSR/RSC on TanStack Start

Key Concepts

• TanStack Start: A framework built on TanStack Router that provides flexible data-fetching and rendering strategies.
• Isomorphic Rendering: The ability of React to render in both server and client contexts.
• Hydration: The process where server-rendered HTML is "attached" to by the client-side React code to become interactive.
• RSC (React Server Components): Components that render exclusively on the server, reducing the amount of JavaScript sent to the client.
• Loaders: A core TanStack Router mechanism that orchestrates data fetching before a route renders.
• Composite Components: A TanStack-specific pattern for creating page shells with defined slots for dynamic content.

1. Client-Side Rendering (CSR)

• Mechanism: The ssr property is set to false. The server sends minimal HTML, and the client fetches data via the router's loader upon page load.
• Process: The TanStack Router triggers the loader, fetches data from the API, and then renders the component.
• Key Detail: This is the classic Single Page Application (SPA) approach. It is consistent regardless of whether the user performs a "hard" or "soft" navigation.

2. Server-Side Rendering (SSR)

• Mechanism: ssr is set to true (default).
• Process: During a hard navigation (page refresh), the server fetches the data and renders the full HTML. The client then performs a "hydration" cycle, where it re-renders the page to attach event listeners.
• Key Detail: The code for the loader remains identical to the CSR version, demonstrating the framework's abstraction capabilities.

3. Data-Only SSR

• Mechanism: ssr: 'data-only'.
• Process: The server fetches the data and serializes it into the HTML, but does not render the component HTML on the server. The client receives the data and performs the initial render.
• Use Case: Ideal for dashboards where you want to avoid caching full page content on a CDN but need to fetch data securely on the server before passing it to the client.

4. RSC (Low-Level API)

• Mechanism: Enabled via the Vite plugin for RSC.
• Process: Uses an async server component to fetch data directly. The renderServerComponent function converts the JSX into a "renderable" object.
• Key Detail: The loader fetches this renderable object, which is then passed to the page component to be dropped directly into the JSX. This allows for a clean separation of server-side data fetching and client-side presentation.

5. RSC Composite Components

• Mechanism: Uses the createCompositeComponent API.
• Process: Defines a "shell" or layout component with specific "slots." The loader fetches the composite component and passes it to the page, where dynamic content or interactive components are injected into the defined slots.
• Key Detail: This architecture allows for complex layouts where server-rendered shells can host interactive client components without needing to manually manage use client boundaries for every sub-component.

Synthesis and Conclusion

TanStack Start provides a unified architecture that allows developers to switch between five distinct rendering strategies—CSR, SSR, Data-Only SSR, RSC Low-Level, and RSC Composite—without changing the underlying data-fetching logic (the loaders).

Key Takeaways:

• Consistency: The use of loaders as the primary data-fetching mechanism ensures that the developer experience remains consistent across all five rendering modes.
• Flexibility: Developers can mix and match these strategies within the same application, choosing the right tool for specific routes (e.g., using Data-Only SSR for dashboards and RSCs for content-heavy pages).
• Evolution: The framework acknowledges that React has always been isomorphic; TanStack Start simply provides a standardized, modern way to leverage these capabilities alongside the newer RSC paradigm.