router-core/ssr

Implements non-streaming and streaming server-side rendering for TanStack Router applications.

1.4k|34|Updated Mar 7, 2024
One-click install
npx skills add https://github.com/mehdibha/dotUI --skill router-core-ssr-mehdibha
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: router-core/ssr
Source: https://github.com/mehdibha/dotUI/tree/main/.claude/skills/tanstack-router-ssr
Command: npx skills add https://github.com/mehdibha/dotUI --skill router-core-ssr-mehdibha

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @tanstack/react-router.

What problem does it solve? Setting up server-side rendering with TanStack Router requires coordinating server and client entries, request handlers, document head management, and loader dehydration, and mistakes cause hydration mismatches or crashes from browser-only APIs running on the server. ## Core Features & Use Cases - SSR Setup Patterns: Provides complete server and client entry configurations using createRequestHandler, defaultRenderHandler, defaultStreamHandler, renderRouterToString, and renderRouterToStream. - Document Head Management: Covers the head route option, HeadContent and Scripts components, nested meta deduplication, and ScriptOnce for pre-hydration scripts like theme detection. - Common Mistake Prevention: Documents critical pitfalls such as using browser APIs in loaders, hash-based conditional rendering, and incorrectly applying Next.js or Remix SSR patterns. - Use Case: When integrating TanStack Router into an existing Express server, use the provided adapter pattern to convert Express requests into Web API Requests and stream the rendered response back. ## Quick Start Set up streaming SSR for my TanStack Router app with a shared router factory, server entry, and client hydration entry.

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 SSR with TanStack Router?▼

Create a shared router factory used by both entries, then build a server entry with createRequestHandler and defaultRenderHandler or defaultStreamHandler, and a client entry that calls hydrateRoot with RouterClient. Loaders are automatically dehydrated on the server and hydrated on the client.

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

Non-streaming SSR renders the full page on the server and sends one HTML response via renderRouterToString. Streaming SSR sends the critical first paint immediately and streams remaining content incrementally via renderRouterToStream or defaultStreamHandler.

Do TanStack Router loaders run on the server with SSR?▼

Yes, with SSR enabled loaders run on both client and server, but they are not server-only like Remix or Next.js loaders. Browser-only APIs such as window or localStorage must be guarded with an environment check to avoid server crashes.

Can I use TanStack Router SSR with an Express server?▼

Yes, createRequestHandler expects a Web API Request and returns a Web API Response, so Express integration requires converting req into a Request and piping the response body back with node stream pipelines. A complete adapter example is provided in the documentation.

Why does my SSR app have hydration mismatches with hash-based rendering?▼

Hash fragments are never sent to the server, so conditional rendering based on window.location.hash differs between server and client output. Use validated search params instead so the state is visible during server rendering.

Should I use manual SSR setup or TanStack Start for production?▼

TanStack Start is the recommended way to do SSR in production because the manual SSR APIs are experimental and share internal implementations that may change. Use manual setup only when integrating with an existing server.