router-core/ssr

Configure non-streaming and streaming SSR for TanStack Router applications.

14.9k|1.8k|Updated Jan 14, 2019
One-click install
npx skills add https://github.com/TanStack/router --skill router-core-ssr
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: router-core/ssr
Source: https://github.com/TanStack/router/tree/main/packages/router-core/skills/router-core/ssr
Command: npx skills add https://github.com/TanStack/router --skill router-core-ssr

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

TanStack Router SSR enables developers to render routes on the server, then hydrate on the client, combining faster first paints with full client interactivity.

Core Features & Use Cases

  • Non-streaming SSR: server-render complete pages for fast initial load.
  • Streaming SSR: progressively stream content for better perceived performance.
  • Document head management: coordinated head tags across server and client.
  • Unified loader hydration: dehydrates on server and hydrates on client for data consistency.
  • Server/client parity: single router factory used in both environments.

Quick Start

Set up a shared router, enable SSR with createRequestHandler, and render with defaultRenderHandler or defaultStreamHandler to serve both non-streaming and streaming responses.

Frequently Asked Questions about router-core/ssr

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I set up server-side rendering with TanStack Router?

Set up server-side rendering by creating a shared router factory, then use createRequestHandler with defaultRenderHandler or defaultStreamHandler to prerender routes and hydrate on the client.

What is the difference between streaming and non-streaming SSR in TanStack Router?

Non-streaming SSR renders complete pages on the server for fast initial load, while streaming SSR progressively sends content chunks to the client to improve perceived performance.

How does loader dehydration and hydration work in TanStack Router SSR?

Loader dehydration serializes server-fetched data during server-side rendering, which then hydrates on the client to ensure data consistency and prevent duplicate fetches.

Can I manage dynamic document head tags across server and client with TanStack Router?

Yes, server-side rendering with TanStack Router includes coordinated head management to dynamically render and hydrate document head tags across both server and client environments.

Do I need a single router factory for both server and client TanStack Router SSR?

Yes, TanStack Router SSR requires a unified router factory used in both environments to maintain server and client parity, using memory history on the server before client hydration.

When should I use streaming SSR instead of default rendering for TanStack Router?

Use defaultStreamHandler for streaming SSR when you need better perceived performance through progressive content delivery, and use defaultRenderHandler when complete pages are required.