SPA Mode - Client-Side Only Rendering

Configure TanStack Start for single-page application mode with no server-side rendering

server-ssrreacttanstackspacsrclient-side

What is this?

SPA mode renders your entire application on the client, similar to traditional Create React App. The server sends an empty HTML shell, and React hydrates and renders everything in the browser. This is useful for admin panels, internal tools, or when SEO isn't required.

Why use this?

  • Simplest deployment - works on static hosting (CDN)
  • Fast development iteration - no server restarts
  • No server infrastructure needed - deploy to Netlify, Vercel, S3
  • Good for authenticated apps - no SEO concerns
  • Trade-off: slower initial load - JavaScript must download and execute first
  • Trade-off: no SEO - search engines see empty page

SPA Mode - Punk Songs

    Implementation Details

    1. Configure Route for SPA Mode

    Set ssr: false in your route configuration to disable server-side rendering.

    1

    2. Client-Side Data Fetching

    Use useEffect or TanStack Query to fetch data on the client.

    1

    3. Or Use TanStack Query

    TanStack Query provides better loading states and caching for client-side fetching.

    1

    When to Use SPA Mode

    ✓ Good For:

    • Admin dashboards and internal tools
    • Apps behind authentication
    • Apps where SEO doesn't matter
    • Static deployments (CDN only)
    • Rapid prototyping

    ✗ Avoid For:

    • Public-facing marketing sites
    • E-commerce product pages
    • Blog content that needs SEO
    • Apps requiring fastest initial load
    • Apps on slow networks

    Related Projects

    Related project: ssr-full-ssr

    Related project: ssr-data-only

    Note: Related project cards will be populated from the registry