skills.rest
guillempuche
guillempucheCOMMUNITY
Explore all skills by this author →
GitHub

router-core/ssr

Render React applications on the server with TanStack Router for HTML output.

Updated Aug 23, 2026
Search Tags:#react#streaming#ssr#tanstack-router#loader-dehydration#document-head
One-click install
npx skills add https://github.com/guillempuche/engranatge --skill router-core-ssr-guillempuche
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: router-core/ssr
Source: https://github.com/guillempuche/engranatge/tree/main/docs/repos/tanstack-router/packages/router-core/skills/router-core/ssr
Command: npx skills add https://github.com/guillempuche/engranatge --skill router-core-ssr-guillempuche

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Server‑Side Rendering with TanStack Router is complex, especially when balancing non‑streaming and streaming modes, handling document head, scripts, and data dehydration/hydration. This Skill abstracts the setup, providing clear patterns to render routes on the server and hydrate them on the client.

Core Features & Use Cases

  • Dual SSR modes: non‑streaming full HTML and streaming incremental HTML.
  • Automatic loader dehydration and hydration so server‑side data is reused on the client.
  • Document head management with a unified head option for meta, links, styles, and script injection.
  • Integration helpers such as createRequestHandler, defaultRenderHandler, renderRouterToString/Stream, and an Express bridge example.
  • Use case: Build a production‑ready React app with TanStack Router that renders on the server for SEO and performance while supporting streaming for faster first paint.

Quick Start

Ask the assistant to set up a basic non‑streaming SSR entry point for a TanStack Router app.

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 in React?▼

Streaming SSR sends incremental HTML chunks to the browser for a faster first paint, while non-streaming SSR waits for the full page HTML to be generated before sending the complete response.

How does loader dehydration work during React SSR?▼

Document head management is handled through a unified head option that configures meta tags, links, styles, and script injection during server-side rendering to ensure proper SEO and asset loading.

Do I need a specific Node environment to run TanStack Router SSR?▼

You can integrate SSR with an Express server by using the provided Express bridge example, which connects the createRequestHandler and defaultRenderHandler helpers to your existing server routes.

What is the difference between streaming and non-streaming SSR for React?▼

Streaming SSR sends incremental HTML chunks to the browser for a faster first paint, while non-streaming SSR waits for the full page HTML to be generated before sending the complete response.

How do I manage document head tags for SEO during server-side rendering?▼

Document head management is handled through a unified head option that configures meta tags, links, styles, and script injection during server-side rendering to ensure proper SEO and asset loading.

Can I use Express with TanStack Router for server-side rendering?▼

You can integrate SSR with an Express server by using the provided Express bridge example, which connects the createRequestHandler and defaultRenderHandler helpers to your existing server routes.

Related Skills

Explore More Software Engineering Skills→
hashintelhashintel
7

compositions-router-query

Integrate TanStack Router with TanStack Query for synchronized navigation and data caching.

Official
Advanced
jcsoftdevjcsoftdev

server-side-rendering

Render React components on the server to deliver HTML.

Community
Intermediate
abereghiciabereghici

router-core/ssr

Implement server-side rendering for TanStack Router React apps.

Community
Advanced
mauriciodelriomauriciodelrio
3

rendering-strategies

Select and apply rendering strategies for React and Next.js applications.

Community
Advanced