skills.rest
aidanaden
aidanadenCOMMUNITY
Explore all skills by this author →
GitHub

tanstack-integration-best-practices

Coordinate TanStack Query, Router, and Start caching with SSR hydration patterns.

Updated Feb 17, 2026
Search Tags:#tanstack#ssr#react-query#react-router#integration-patterns#data-caching#typesafety
One-click install
npx skills add https://github.com/aidanaden/sg-food-guide --skill tanstack-integration-best-practices-aidanaden
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tanstack-integration-best-practices
Source: https://github.com/aidanaden/sg-food-guide/tree/main/.agents/skills/tanstack-integration
Command: npx skills add https://github.com/aidanaden/sg-food-guide --skill tanstack-integration-best-practices-aidanaden

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Teams integrating TanStack Query, TanStack Router, and TanStack Start often struggle to coordinate server-state caching, data flow, and SSR hydration across full-stack applications.

Core Features & Use Cases

  • Clear guidance on ownership and caching coordination across TanStack components
  • Patterns for SSR hydration, loader integration, and data synchronization
  • Real-world use cases illustrating end-to-end integration in typical apps

Quick Start

Set up a TanStack Router with a per-request QueryClient and enable SSR integration to hydrate data automatically.

Frequently Asked Questions about tanstack-integration-best-practices

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

FAQPage Schema
How do I coordinate TanStack Query and Router for SSR hydration?▼

To coordinate TanStack Query and Router for SSR hydration, set up TanStack Router with a per-request QueryClient. This enables SSR integration to hydrate server-state data automatically across your full-stack application.

What's the best way to manage server-state caching across TanStack components?▼

The best way to manage server-state caching across TanStack components is to standardize caching ownership and coordination. Establish clear metadata standards and integration patterns to ensure safe, scalable data flow.

How do I integrate TanStack Start with React Query for full-stack data flow?▼

You integrate TanStack Start with React Query for full-stack data flow by applying specific SSR integration patterns and loader synchronization rules. This standardizes data fetching from server to client.

Why do I need a per-request QueryClient for TanStack SSR?▼

You need a per-request QueryClient for TanStack SSR to prevent cross-request data contamination and ensure safe server-side rendering. It isolates server-state caching during hydration for each user request.

Are there specific patterns for TanStack Router loader integration and data synchronization?▼

Yes, there are specific patterns for TanStack Router loader integration and data synchronization. These standardize how loaders fetch initial data and synchronize it with React Query caches during SSR hydration.

Related Skills

Explore More Software Engineering Skills→
cenjiecenjie

tanstack-integration-best-practices

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

Community
Advanced
FirzusFirzus
1

swr

Guide correct SWR v2 implementation for React and Next.js data fetching.

Community
Advanced
Marwan78888Marwan78888
16

typescript-pro

Design type-safe TypeScript APIs with advanced generics and tRPC integration.

Community
Advanced
DITEKmaxDITEKmax

angular-ssr

Implement server-side rendering and hydration for Angular v20+ applications.

Community
Advanced