skills.rest
Angael
AngaelCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

react-start-server-components

Implement and debug TanStack Start React Server Components in React 19 applications.

Updated Dec 21, 2025
Search Tags:#caching#tanstack start#ssr#react 19#react server components#flight stream#composite component
One-click install
npx skills add https://github.com/Angael/veles --skill react-start-server-components-angael
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-start-server-components
Source: https://github.com/Angael/veles/tree/main/.agents/skills/react-start-server-components
Command: npx skills add https://github.com/Angael/veles --skill react-start-server-components-angael

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? TanStack Start RSCs behave differently from Next.js App Router patterns, and stale docs, wrong cache ownership, and slot misuse cause subtle bugs. This Skill provides current API guidance, decision rules, and debugging paths for building RSCs correctly in TanStack Start apps. ## Core Features & Use Cases - Primitive selection: Decide between renderServerComponent, createCompositeComponent, and low-level Flight stream APIs based on whether client slots are needed. - Cache and refresh ownership: Choose between Router loader cache, TanStack Query (with structuralSharing: false), or HTTP cache, and wire invalidation to the correct owner. - Debugging and review: Triage setup failures, slot bugs, stale data, serialization errors, and SSR mode issues using dedicated reference docs. - Use Case: When migrating a Next.js App Router page to TanStack Start, use this Skill to translate 'use client' boundaries into Composite Component slots and server actions into explicit POST createServerFn calls. ## Quick Start Ask the AI to implement a TanStack Start route that renders a server component through a loader and explain which cache owner should handle its refresh.

Frequently Asked Questions about react-start-server-components

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

FAQPage Schema
How do I use React Server Components in TanStack Start?▼

Enable RSC in Vite with tanstackStart({ rsc: { enabled: true } }) plus @vitejs/plugin-rsc, then return components from a createServerFn using renderServerComponent. Fetch the result in a route loader and render it in the route component.

What is the difference between renderServerComponent and createCompositeComponent?▼

renderServerComponent returns a renderable fragment with no client slots, while createCompositeComponent supports client-provided children, render props, and component props. Use Composite Components only when client interactivity must be inserted inside server-rendered markup.

Why is my TanStack Query cached RSC showing stale or broken data?▼

Query-cached RSC values require structuralSharing: false, otherwise Query attempts to merge Flight payloads across fetches. Also verify invalidation targets the actual cache owner, using invalidateQueries for Query-owned fragments or router.invalidate() for loader-owned ones.

Can I migrate Next.js App Router RSC patterns to TanStack Start?▼

Yes, but the mental model differs: TanStack Start treats RSCs as fetchable Flight fragments rather than a server-first tree. Map 'use client' boundaries to Composite Component slots and server actions to explicit createServerFn({ method: 'POST' }) calls.

When should I use ssr: 'data-only' versus ssr: false in TanStack Start?▼

Use ssr: 'data-only' when the route component needs browser APIs but the loader can still prefetch on the server. Use ssr: false only when the loader itself depends on browser APIs like localStorage or window.

Related Skills

Explore More Software Engineering Skills→
TanStackTanStack
15.0k

server-components

Implement and debug TanStack Start React Server Components with Router and Query caching.

Official
Advanced
JayRHaJayRHa
3

nginx-config-pro

Generate nginx reverse-proxy configurations with TLS, caching, and security headers.

Community
Advanced
fusenginefusengine
1

start-routing-data

Implement isomorphic loaders, Query prefetching, selective SSR, and mutations in TanStack Start routes.

Community
Advanced
dr-codedr-code

server-components

Guide Server versus Client Component decisions in Next.js App Router projects.

Community
Intermediate