skills.rest
rezics
rezicsOFFICIAL
Explore all skills by this author →
WebsiteGitHub

router-core/ssr

Execute TanStack Router loaders on server and client for universal rendering and data hydration.

6|1|Updated Jun 1, 2025
Search Tags:#streaming#ssr#hydration#tanstack-router#server-rendering#head-management#loader-data
One-click install
npx skills add https://github.com/rezics/rezics --skill router-core-ssr-rezics
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: router-core/ssr
Source: https://github.com/rezics/rezics/tree/main/.agents/skills/tanstack/router/router-core/ssr
Command: npx skills add https://github.com/rezics/rezics --skill router-core-ssr-rezics

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

SSR for TanStack Router enables server-rendered HTML and streaming capabilities with automatic loader dehydration/hydration, memory history usage on the server, and integrated document head management.

Core Features & Use Cases

  • Non-streaming and streaming SSR support with a shared router factory.
  • Server and client loader data dehydration/hydration and data serialization.
  • Document head management with HeadContent, Scripts, and per-route head options; supports streaming.

Quick Start

Create a shared router via a factory, export createRouter, and render it on the server using renderRouterToString or defaultRenderHandler.

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 SSR with TanStack Router by creating a shared router factory, executing loaders on the server, and rendering with renderRouterToString. You get server-rendered HTML with automatic loader data dehydration and hydration.

What is loader data dehydration and hydration in SSR?▼

Loader data dehydration and hydration is the process of serializing server-fetched route data into the HTML and rehydrating it on the client, ensuring the client router matches the server state without redundant data fetching.

Does TanStack Router support streaming SSR?▼

Yes, TanStack Router supports streaming SSR. It enables progressive HTML rendering and streaming head management while executing loaders across route trees to deliver content to the browser incrementally.

Can I manage document head tags per route in a server-rendered TanStack Router app?▼

Yes, you can manage document head tags per route. The SSR workflow integrates HeadContent, Scripts, and per-route head options to inject dynamic meta tags and scripts during server rendering.

Why do I need a shared router factory for TanStack Router SSR?▼

A shared router factory is required to instantiate separate router instances for the server and client. This ensures memory history is used on the server while the client uses browser history, preventing state leakage across requests.

How do I handle dynamic scripts and head management during streaming SSR?▼

Handle dynamic scripts during streaming SSR by using the integrated HeadContent component and per-route head options. This injects required scripts and meta tags progressively as the HTML stream renders.

Related Skills

Explore More Software Engineering Skills→
pluginagentmarketplacepluginagentmarketplace
1

react-router

Configure React Router v6 client-side routing with nested and protected routes.

Community
Intermediate
WalshingtonWalshington

tanstack-start

Build and deploy TanStack Start full-stack React apps on Cloudflare Workers.

Community
Advanced
cenjiecenjie

tanstack-integration-best-practices

Integrate TanStack Query with TanStack Router for SSR-safe data fetching and caching.

Community
Advanced
wanghaishengwanghaisheng
10

tanstack-integration-best-practices

Define TanStack Query, Router, and Start integration patterns for SSR hydration.

Community
Advanced