skills.rest
fusengine
fusengineCOMMUNITY
Explore all skills by this author →
Website𝕏@fusengineGitHub

start-routing-data

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

1|Updated Jul 29, 2026
Search Tags:#react#tanstack start#tanstack query#mutations#ssr#data loading#isomorphic loaders
One-click install
npx skills add https://github.com/fusengine/kimi-code --skill start-routing-data-fusengine
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: start-routing-data
Source: https://github.com/fusengine/kimi-code/tree/main/plugins/tanstack-start-expert/skills/start-routing-data
Command: npx skills add https://github.com/fusengine/kimi-code --skill start-routing-data-fusengine

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? TanStack Start route loaders run on both server and client, so naive data-loading code crashes SSR, breaks hydration, or refetches data the server already primed. This Skill provides the Start-specific patterns for loading and mutating data correctly across that isomorphic boundary. ## Core Features & Use Cases - Isomorphic Loaders: Rules for writing loaders that run safely on server (first request) and client (navigation), with guidance on gating browser-only APIs. - Query in Loader: Prefetch with context.queryClient.ensureQueryData() in the loader and read the warm cache with useQuery in the component using a shared queryOptions factory. - Selective SSR: Per-route ssr: true | false | 'data-only' control, including the functional runtime form and tightening-only inheritance. - Server-fn Mutations: Write data via createServerFn handlers and refresh the UI with router.invalidate() or queryClient.invalidateQueries. - Use Case: Building a /posts/$postId route that SSR-prefetches a post through TanStack Query, hydrates without a client refetch, and deletes the post via a server function with proper cache invalidation. ## Quick Start Ask the agent to add a TanStack Start route that prefetches data with ensureQueryData in the loader and reads it with useQuery in the component.

Frequently Asked Questions about start-routing-data

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

FAQPage Schema
How do I use TanStack Query inside a TanStack Start loader?▼

Call context.queryClient.ensureQueryData(queryOptions) inside the loader and useQuery with the same queryOptions factory in the component. The shared queryKey makes hydration reuse the SSR-primed cache instead of refetching on the client.

How do I disable SSR for a single route in TanStack Start?▼

Set the route's ssr flag to false for fully client-only rendering, or 'data-only' to run loaders on the server while rendering the component on the client. A functional form ssr: ({ params, search }) => ... allows runtime decisions on the server.

Why does my TanStack Start loader crash during SSR?▼

Loaders are isomorphic and run on the server during the initial request, so referencing window, document, or localStorage at loader top level crashes SSR. Move browser-only access into useEffect or gate the route with ssr: false or 'data-only'.

How do I refresh data after a mutation in TanStack Start?▼

Perform the write through a createServerFn handler, then call router.invalidate() to re-run loaders or queryClient.invalidateQueries() to refetch the Query cache. Invalidate the same source that rendered the stale data.

Can a child route re-enable SSR that a parent route disabled?▼

No. The ssr flag inherits down the route tree and only tightens: true to 'data-only' to false. A child route setting ssr: true under a parent with ssr: false has no effect.

When should I not use this Start data-loading skill?▼

Do not use it for generic TanStack Router or Query questions like route trees, search-param validation, or basic useQuery/useMutation mechanics. Those belong to the react-expert react-tanstack-router skill; this one covers only Start-specific behavior.

Related Skills

Explore More Software Engineering Skills→
guillempucheguillempuche

lifecycle/migrate-from-nextjs

Migrate a Next.js App Router application to TanStack Start.

Community
Advanced
koushik-haitkoushik-hait

clerk-nextjs-patterns

Integrate Clerk authentication into Next.js with server/client auth flows and caching.

Community
Advanced
SeanChenRSeanChenR

tanstack-router

Provide type-safe routing and integrated data loading for React and Solid apps.

Community
Intermediate
abereghiciabereghici

compositions/router-query

Coordinate TanStack Router with TanStack Query for data fetching and caching during navigation.

Community
Advanced