[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill-tanstack-server-components":3,"mdc-q8zhk1-key":47,"related-org-tanstack-server-components":925,"related-repo-tanstack-server-components":1067},{"slug":4,"name":4,"fn":5,"description":6,"org":7,"tags":11,"stars":22,"repoUrl":23,"updatedAt":24,"license":25,"forks":26,"topics":27,"repo":42,"sourceUrl":45,"mdContent":46},"server-components","implement TanStack Start server components","Implement, review, debug, and refactor TanStack Start React Server Components in React 19 apps. Use when tasks mention @tanstack\u002Freact-start\u002Frsc, renderServerComponent, createCompositeComponent, CompositeComponent, renderToReadableStream, createFromReadableStream, createFromFetch, Composite Components, React Flight streams, loader or query owned RSC caching, router.invalidate, structuralSharing: false, selective SSR, stale names like renderRsc or .validator, or migration from Next App Router RSC patterns. Do not use for generic SSR or non-TanStack RSC frameworks except brief comparison.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},"tanstack","TanStack","https:\u002F\u002Fpexgzepcugksgbtrxkhf.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Forg-logos\u002Ftanstack.png",[12,16,19],{"name":13,"slug":14,"type":15},"React","react","tag",{"name":17,"slug":18,"type":15},"SSR","ssr",{"name":20,"slug":21,"type":15},"Frontend","frontend",14787,"https:\u002F\u002Fgithub.com\u002FTanStack\u002Frouter","2026-07-30T05:27:02.47953",null,1761,[28,29,30,14,31,32,33,34,35,36,37,18,38,39,40,41],"framework","fullstack","javascript","route","router","routing","rpc","search","searchparams","server-functions","state-management","typesafe","typescript","url",{"repoUrl":23,"stars":22,"forks":26,"topics":43,"description":44},[28,29,30,14,31,32,33,34,35,36,37,18,38,39,40,41],"🤖 A client-first, server-capable, fully type-safe router and full-stack framework for the web (React and more).","https:\u002F\u002Fgithub.com\u002FTanStack\u002Frouter\u002Ftree\u002FHEAD\u002Fpackages\u002Freact-start\u002Fskills\u002Freact-start\u002Fserver-components","---\nname: server-components\ndescription: >-\n  Implement, review, debug, and refactor TanStack Start React Server\n  Components in React 19 apps. Use when tasks mention\n  @tanstack\u002Freact-start\u002Frsc, renderServerComponent,\n  createCompositeComponent, CompositeComponent,\n  renderToReadableStream, createFromReadableStream, createFromFetch,\n  Composite Components, React Flight streams, loader or query owned\n  RSC caching, router.invalidate, structuralSharing: false,\n  selective SSR, stale names like renderRsc or .validator, or\n  migration from Next App Router RSC patterns. Do not use for\n  generic SSR or non-TanStack RSC frameworks except brief\n  comparison.\nmetadata:\n  type: sub-skill\n  library: tanstack-start\n  library_version: '1.168.32'\nrequires:\n  - react-start\n  - start-core\u002Fserver-functions\n  - start-core\u002Fexecution-model\nsources:\n  - TanStack\u002Frouter:docs\u002Fstart\u002Fframework\u002Freact\u002Fguide\u002Fserver-components.md\n  - TanStack\u002Frouter:docs\u002Fstart\u002Fframework\u002Freact\u002Fguide\u002Fserver-functions.md\n  - TanStack\u002Frouter:docs\u002Fstart\u002Fframework\u002Freact\u002Fguide\u002Fexecution-model.md\n  - TanStack\u002Frouter:docs\u002Frouter\u002Fguide\u002Fdata-loading.md\n---\n\n# TanStack Start React Server Components\n\nTreat TanStack Start RSCs as fetchable React Flight payloads, not as a framework-owned server tree. Start from data ownership and cache ownership, then choose the smallest RSC primitive that fits.\n\n## When this skill is active\n\n1. Inspect `vite.config.*` for `tanstackStart({ rsc: { enabled: true } })`, `rsc()`, and `viteReact()`.\n2. Inspect route files for `loader`, `loaderDeps`, `staleTime`, `ssr`, and `errorComponent`.\n3. Inspect server boundaries: `createServerFn`, `createServerOnlyFn`, `.server.*`, and imports from `@tanstack\u002Freact-start\u002Fserver`.\n4. Identify the cache owner: Router loader cache, TanStack Query, or HTTP\u002Fserver cache.\n5. Identify the refresh path: `router.invalidate()`, `invalidateQueries`, `refetchQueries`, or GET cache headers.\n\n## Hard invariants\n\n- Route loaders are isomorphic. Do not put DB access, secrets, or Node-only APIs directly in a loader. If the loader itself must use browser APIs, make that route `ssr: false`.\n- `renderServerComponent(...)` returns a renderable fragment. It does not support slots.\n- `createCompositeComponent(...)` is for server-rendered UI that must accept client-provided `children`, render props, or component props.\n- Query-cached RSC values require `structuralSharing: false`.\n- Slot payloads are opaque on the server. Do not inspect, map, or clone `props.children`.\n- Render-prop and component-slot arguments must stay Flight-serializable.\n- Current server function validation API is `.validator(...)`. Older snippets may still show `.validator(...)`; normalize them.\n- TanStack custom serialization does not apply inside RSCs yet. Stay inside native Flight-supported values.\n\n## Decide three things immediately\n\n### 1) Transport \u002F composition primitive\n\n- No client slots needed -> `renderServerComponent`\n- Client interactivity must be inserted inside server-rendered markup -> `createCompositeComponent` + `\u003CCompositeComponent src={...} \u002F>`\n- Need custom Flight streaming, API routes, or non-standard transport -> `renderToReadableStream`, `createFromReadableStream`, `createFromFetch`\n\n### 2) Cache owner\n\n- Route-shaped data keyed by pathname, params, or search -> Router cache\n- Independent key space, background refetch, or non-route ownership -> TanStack Query\n- Cross-request reuse on server or CDN -> GET `createServerFn` + response cache headers and\u002For external server cache\n\n### 3) Refresh owner\n\n- Router-owned RSC -> `router.invalidate()`\n- Query-owned RSC -> `queryClient.invalidateQueries(...)` or `refetchQueries(...)`\n- Mixed Router + Query -> invalidate both deliberately; do not assume one refreshes the other\n\n## Pattern chooser\n\n- Simple server fragment in a route loader -> `renderServerComponent`\n- Interactive slot inside server markup -> `createCompositeComponent`\n- Route component needs browser APIs but loader can still prefetch on the server -> `ssr: 'data-only'`\n- Loader itself needs browser APIs -> `ssr: false`\n- Route cache key must include search params -> `loaderDeps`\n- Query-managed RSC -> `useSuspenseQuery` + SSR `ensureQueryData`\n- Multiple independent RSCs -> separate server functions + `Promise.all`\n- Multiple RSCs sharing data or invalidating together -> one server function returning many renderables or sources\n- Need isolated widget failures or staggered reveal -> return promises from the loader and resolve with `use()` inside Suspense\n\n## Slot choice\n\n- `children`: free-form composition, no server-to-client data flow\n- render props: the server must pass serializable data into client-rendered UI\n- component props: reusable client slot with a stable typed prop surface\n- If you are about to use `Children.map`, `cloneElement`, or inspect `children` on the server, stop and convert it to a render prop\n\n## Review \u002F refactor checklist\n\n- Is the chosen primitive the smallest one that fits?\n- Does the loader own the RSC, or should Query own it?\n- Are route cache keys complete (`params` + minimal `loaderDeps`)?\n- Is invalidation hitting the real cache owner?\n- Are query options using `structuralSharing: false` for any RSC value?\n- Are mutations explicit `createServerFn({ method: 'POST' })` calls instead of hidden server actions?\n- Are server-only imports kept inside server functions or server-only boundaries?\n- Are examples using current names (`renderServerComponent`, `.validator`) instead of stale ones?\n\n## Debug fast\n\n- Setup, exports, or stale docs mismatch -> `docs\u002Fcurrent-api-notes.md`\n- Composite Component design or slot bug -> `docs\u002Fcomposite-components.md`\n- Stale data, refetching, loader keys, Query vs Router ownership, or SSR mode -> `docs\u002Fcaching-refresh-ssr.md`\n- Review, refactor, import leaks, error boundaries, or serialization bugs -> `docs\u002Fdebugging-review.md`\n- Architecture and Next\u002FApp Router translation -> `docs\u002Farchitecture.md`\n\n## Copy-paste patterns\n\n- `examples\u002F01-renderable-route-loader.tsx`\n- `examples\u002F02-composite-slots.tsx`\n- `examples\u002F03-query-owned-rsc.tsx`\n- `examples\u002F04-selective-ssr-data-only.tsx`\n- `examples\u002F05-ssr-false-browser-loader.tsx`\n- `examples\u002F06-low-level-flight-api-route.tsx`\n\n## Default implementation sequence\n\n1. Keep server-only work inside `createServerFn` or `createServerOnlyFn`\n2. Return an RSC from the server function\n3. Consume it through the route loader unless Query has a clear ownership advantage\n4. Add the smallest cache policy that satisfies freshness requirements\n5. Wire invalidation exactly once at the real cache owner\n6. Escalate to Composite Components only when the client must fill slots\n7. Escalate to low-level Flight APIs only when high-level helpers cannot express the transport\n",{"data":48,"body":62},{"name":4,"description":6,"metadata":49,"requires":53,"sources":57},{"type":50,"library":51,"library_version":52},"sub-skill","tanstack-start","1.168.32",[54,55,56],"react-start","start-core\u002Fserver-functions","start-core\u002Fexecution-model",[58,59,60,61],"TanStack\u002Frouter:docs\u002Fstart\u002Fframework\u002Freact\u002Fguide\u002Fserver-components.md","TanStack\u002Frouter:docs\u002Fstart\u002Fframework\u002Freact\u002Fguide\u002Fserver-functions.md","TanStack\u002Frouter:docs\u002Fstart\u002Fframework\u002Freact\u002Fguide\u002Fexecution-model.md","TanStack\u002Frouter:docs\u002Frouter\u002Fguide\u002Fdata-loading.md",{"type":63,"children":64},"root",[65,74,80,87,235,241,341,347,354,412,418,443,449,486,492,594,600,650,656,743,749,807,813,870,876],{"type":66,"tag":67,"props":68,"children":70},"element","h1",{"id":69},"tanstack-start-react-server-components",[71],{"type":72,"value":73},"text","TanStack Start React Server Components",{"type":66,"tag":75,"props":76,"children":77},"p",{},[78],{"type":72,"value":79},"Treat TanStack Start RSCs as fetchable React Flight payloads, not as a framework-owned server tree. Start from data ownership and cache ownership, then choose the smallest RSC primitive that fits.",{"type":66,"tag":81,"props":82,"children":84},"h2",{"id":83},"when-this-skill-is-active",[85],{"type":72,"value":86},"When this skill is active",{"type":66,"tag":88,"props":89,"children":90},"ol",{},[91,130,169,203,208],{"type":66,"tag":92,"props":93,"children":94},"li",{},[95,97,104,106,112,114,120,122,128],{"type":72,"value":96},"Inspect ",{"type":66,"tag":98,"props":99,"children":101},"code",{"className":100},[],[102],{"type":72,"value":103},"vite.config.*",{"type":72,"value":105}," for ",{"type":66,"tag":98,"props":107,"children":109},{"className":108},[],[110],{"type":72,"value":111},"tanstackStart({ rsc: { enabled: true } })",{"type":72,"value":113},", ",{"type":66,"tag":98,"props":115,"children":117},{"className":116},[],[118],{"type":72,"value":119},"rsc()",{"type":72,"value":121},", and ",{"type":66,"tag":98,"props":123,"children":125},{"className":124},[],[126],{"type":72,"value":127},"viteReact()",{"type":72,"value":129},".",{"type":66,"tag":92,"props":131,"children":132},{},[133,135,141,142,148,149,155,156,161,162,168],{"type":72,"value":134},"Inspect route files for ",{"type":66,"tag":98,"props":136,"children":138},{"className":137},[],[139],{"type":72,"value":140},"loader",{"type":72,"value":113},{"type":66,"tag":98,"props":143,"children":145},{"className":144},[],[146],{"type":72,"value":147},"loaderDeps",{"type":72,"value":113},{"type":66,"tag":98,"props":150,"children":152},{"className":151},[],[153],{"type":72,"value":154},"staleTime",{"type":72,"value":113},{"type":66,"tag":98,"props":157,"children":159},{"className":158},[],[160],{"type":72,"value":18},{"type":72,"value":121},{"type":66,"tag":98,"props":163,"children":165},{"className":164},[],[166],{"type":72,"value":167},"errorComponent",{"type":72,"value":129},{"type":66,"tag":92,"props":170,"children":171},{},[172,174,180,181,187,188,194,196,202],{"type":72,"value":173},"Inspect server boundaries: ",{"type":66,"tag":98,"props":175,"children":177},{"className":176},[],[178],{"type":72,"value":179},"createServerFn",{"type":72,"value":113},{"type":66,"tag":98,"props":182,"children":184},{"className":183},[],[185],{"type":72,"value":186},"createServerOnlyFn",{"type":72,"value":113},{"type":66,"tag":98,"props":189,"children":191},{"className":190},[],[192],{"type":72,"value":193},".server.*",{"type":72,"value":195},", and imports from ",{"type":66,"tag":98,"props":197,"children":199},{"className":198},[],[200],{"type":72,"value":201},"@tanstack\u002Freact-start\u002Fserver",{"type":72,"value":129},{"type":66,"tag":92,"props":204,"children":205},{},[206],{"type":72,"value":207},"Identify the cache owner: Router loader cache, TanStack Query, or HTTP\u002Fserver cache.",{"type":66,"tag":92,"props":209,"children":210},{},[211,213,219,220,226,227,233],{"type":72,"value":212},"Identify the refresh path: ",{"type":66,"tag":98,"props":214,"children":216},{"className":215},[],[217],{"type":72,"value":218},"router.invalidate()",{"type":72,"value":113},{"type":66,"tag":98,"props":221,"children":223},{"className":222},[],[224],{"type":72,"value":225},"invalidateQueries",{"type":72,"value":113},{"type":66,"tag":98,"props":228,"children":230},{"className":229},[],[231],{"type":72,"value":232},"refetchQueries",{"type":72,"value":234},", or GET cache headers.",{"type":66,"tag":81,"props":236,"children":238},{"id":237},"hard-invariants",[239],{"type":72,"value":240},"Hard invariants",{"type":66,"tag":242,"props":243,"children":244},"ul",{},[245,257,268,287,299,311,316,336],{"type":66,"tag":92,"props":246,"children":247},{},[248,250,256],{"type":72,"value":249},"Route loaders are isomorphic. Do not put DB access, secrets, or Node-only APIs directly in a loader. If the loader itself must use browser APIs, make that route ",{"type":66,"tag":98,"props":251,"children":253},{"className":252},[],[254],{"type":72,"value":255},"ssr: false",{"type":72,"value":129},{"type":66,"tag":92,"props":258,"children":259},{},[260,266],{"type":66,"tag":98,"props":261,"children":263},{"className":262},[],[264],{"type":72,"value":265},"renderServerComponent(...)",{"type":72,"value":267}," returns a renderable fragment. It does not support slots.",{"type":66,"tag":92,"props":269,"children":270},{},[271,277,279,285],{"type":66,"tag":98,"props":272,"children":274},{"className":273},[],[275],{"type":72,"value":276},"createCompositeComponent(...)",{"type":72,"value":278}," is for server-rendered UI that must accept client-provided ",{"type":66,"tag":98,"props":280,"children":282},{"className":281},[],[283],{"type":72,"value":284},"children",{"type":72,"value":286},", render props, or component props.",{"type":66,"tag":92,"props":288,"children":289},{},[290,292,298],{"type":72,"value":291},"Query-cached RSC values require ",{"type":66,"tag":98,"props":293,"children":295},{"className":294},[],[296],{"type":72,"value":297},"structuralSharing: false",{"type":72,"value":129},{"type":66,"tag":92,"props":300,"children":301},{},[302,304,310],{"type":72,"value":303},"Slot payloads are opaque on the server. Do not inspect, map, or clone ",{"type":66,"tag":98,"props":305,"children":307},{"className":306},[],[308],{"type":72,"value":309},"props.children",{"type":72,"value":129},{"type":66,"tag":92,"props":312,"children":313},{},[314],{"type":72,"value":315},"Render-prop and component-slot arguments must stay Flight-serializable.",{"type":66,"tag":92,"props":317,"children":318},{},[319,321,327,329,334],{"type":72,"value":320},"Current server function validation API is ",{"type":66,"tag":98,"props":322,"children":324},{"className":323},[],[325],{"type":72,"value":326},".validator(...)",{"type":72,"value":328},". Older snippets may still show ",{"type":66,"tag":98,"props":330,"children":332},{"className":331},[],[333],{"type":72,"value":326},{"type":72,"value":335},"; normalize them.",{"type":66,"tag":92,"props":337,"children":338},{},[339],{"type":72,"value":340},"TanStack custom serialization does not apply inside RSCs yet. Stay inside native Flight-supported values.",{"type":66,"tag":81,"props":342,"children":344},{"id":343},"decide-three-things-immediately",[345],{"type":72,"value":346},"Decide three things immediately",{"type":66,"tag":348,"props":349,"children":351},"h3",{"id":350},"_1-transport-composition-primitive",[352],{"type":72,"value":353},"1) Transport \u002F composition primitive",{"type":66,"tag":242,"props":355,"children":356},{},[357,368,387],{"type":66,"tag":92,"props":358,"children":359},{},[360,362],{"type":72,"value":361},"No client slots needed -> ",{"type":66,"tag":98,"props":363,"children":365},{"className":364},[],[366],{"type":72,"value":367},"renderServerComponent",{"type":66,"tag":92,"props":369,"children":370},{},[371,373,379,381],{"type":72,"value":372},"Client interactivity must be inserted inside server-rendered markup -> ",{"type":66,"tag":98,"props":374,"children":376},{"className":375},[],[377],{"type":72,"value":378},"createCompositeComponent",{"type":72,"value":380}," + ",{"type":66,"tag":98,"props":382,"children":384},{"className":383},[],[385],{"type":72,"value":386},"\u003CCompositeComponent src={...} \u002F>",{"type":66,"tag":92,"props":388,"children":389},{},[390,392,398,399,405,406],{"type":72,"value":391},"Need custom Flight streaming, API routes, or non-standard transport -> ",{"type":66,"tag":98,"props":393,"children":395},{"className":394},[],[396],{"type":72,"value":397},"renderToReadableStream",{"type":72,"value":113},{"type":66,"tag":98,"props":400,"children":402},{"className":401},[],[403],{"type":72,"value":404},"createFromReadableStream",{"type":72,"value":113},{"type":66,"tag":98,"props":407,"children":409},{"className":408},[],[410],{"type":72,"value":411},"createFromFetch",{"type":66,"tag":348,"props":413,"children":415},{"id":414},"_2-cache-owner",[416],{"type":72,"value":417},"2) Cache owner",{"type":66,"tag":242,"props":419,"children":420},{},[421,426,431],{"type":66,"tag":92,"props":422,"children":423},{},[424],{"type":72,"value":425},"Route-shaped data keyed by pathname, params, or search -> Router cache",{"type":66,"tag":92,"props":427,"children":428},{},[429],{"type":72,"value":430},"Independent key space, background refetch, or non-route ownership -> TanStack Query",{"type":66,"tag":92,"props":432,"children":433},{},[434,436,441],{"type":72,"value":435},"Cross-request reuse on server or CDN -> GET ",{"type":66,"tag":98,"props":437,"children":439},{"className":438},[],[440],{"type":72,"value":179},{"type":72,"value":442}," + response cache headers and\u002For external server cache",{"type":66,"tag":348,"props":444,"children":446},{"id":445},"_3-refresh-owner",[447],{"type":72,"value":448},"3) Refresh owner",{"type":66,"tag":242,"props":450,"children":451},{},[452,462,481],{"type":66,"tag":92,"props":453,"children":454},{},[455,457],{"type":72,"value":456},"Router-owned RSC -> ",{"type":66,"tag":98,"props":458,"children":460},{"className":459},[],[461],{"type":72,"value":218},{"type":66,"tag":92,"props":463,"children":464},{},[465,467,473,475],{"type":72,"value":466},"Query-owned RSC -> ",{"type":66,"tag":98,"props":468,"children":470},{"className":469},[],[471],{"type":72,"value":472},"queryClient.invalidateQueries(...)",{"type":72,"value":474}," or ",{"type":66,"tag":98,"props":476,"children":478},{"className":477},[],[479],{"type":72,"value":480},"refetchQueries(...)",{"type":66,"tag":92,"props":482,"children":483},{},[484],{"type":72,"value":485},"Mixed Router + Query -> invalidate both deliberately; do not assume one refreshes the other",{"type":66,"tag":81,"props":487,"children":489},{"id":488},"pattern-chooser",[490],{"type":72,"value":491},"Pattern chooser",{"type":66,"tag":242,"props":493,"children":494},{},[495,505,515,526,536,546,565,576,581],{"type":66,"tag":92,"props":496,"children":497},{},[498,500],{"type":72,"value":499},"Simple server fragment in a route loader -> ",{"type":66,"tag":98,"props":501,"children":503},{"className":502},[],[504],{"type":72,"value":367},{"type":66,"tag":92,"props":506,"children":507},{},[508,510],{"type":72,"value":509},"Interactive slot inside server markup -> ",{"type":66,"tag":98,"props":511,"children":513},{"className":512},[],[514],{"type":72,"value":378},{"type":66,"tag":92,"props":516,"children":517},{},[518,520],{"type":72,"value":519},"Route component needs browser APIs but loader can still prefetch on the server -> ",{"type":66,"tag":98,"props":521,"children":523},{"className":522},[],[524],{"type":72,"value":525},"ssr: 'data-only'",{"type":66,"tag":92,"props":527,"children":528},{},[529,531],{"type":72,"value":530},"Loader itself needs browser APIs -> ",{"type":66,"tag":98,"props":532,"children":534},{"className":533},[],[535],{"type":72,"value":255},{"type":66,"tag":92,"props":537,"children":538},{},[539,541],{"type":72,"value":540},"Route cache key must include search params -> ",{"type":66,"tag":98,"props":542,"children":544},{"className":543},[],[545],{"type":72,"value":147},{"type":66,"tag":92,"props":547,"children":548},{},[549,551,557,559],{"type":72,"value":550},"Query-managed RSC -> ",{"type":66,"tag":98,"props":552,"children":554},{"className":553},[],[555],{"type":72,"value":556},"useSuspenseQuery",{"type":72,"value":558}," + SSR ",{"type":66,"tag":98,"props":560,"children":562},{"className":561},[],[563],{"type":72,"value":564},"ensureQueryData",{"type":66,"tag":92,"props":566,"children":567},{},[568,570],{"type":72,"value":569},"Multiple independent RSCs -> separate server functions + ",{"type":66,"tag":98,"props":571,"children":573},{"className":572},[],[574],{"type":72,"value":575},"Promise.all",{"type":66,"tag":92,"props":577,"children":578},{},[579],{"type":72,"value":580},"Multiple RSCs sharing data or invalidating together -> one server function returning many renderables or sources",{"type":66,"tag":92,"props":582,"children":583},{},[584,586,592],{"type":72,"value":585},"Need isolated widget failures or staggered reveal -> return promises from the loader and resolve with ",{"type":66,"tag":98,"props":587,"children":589},{"className":588},[],[590],{"type":72,"value":591},"use()",{"type":72,"value":593}," inside Suspense",{"type":66,"tag":81,"props":595,"children":597},{"id":596},"slot-choice",[598],{"type":72,"value":599},"Slot choice",{"type":66,"tag":242,"props":601,"children":602},{},[603,613,618,623],{"type":66,"tag":92,"props":604,"children":605},{},[606,611],{"type":66,"tag":98,"props":607,"children":609},{"className":608},[],[610],{"type":72,"value":284},{"type":72,"value":612},": free-form composition, no server-to-client data flow",{"type":66,"tag":92,"props":614,"children":615},{},[616],{"type":72,"value":617},"render props: the server must pass serializable data into client-rendered UI",{"type":66,"tag":92,"props":619,"children":620},{},[621],{"type":72,"value":622},"component props: reusable client slot with a stable typed prop surface",{"type":66,"tag":92,"props":624,"children":625},{},[626,628,634,635,641,643,648],{"type":72,"value":627},"If you are about to use ",{"type":66,"tag":98,"props":629,"children":631},{"className":630},[],[632],{"type":72,"value":633},"Children.map",{"type":72,"value":113},{"type":66,"tag":98,"props":636,"children":638},{"className":637},[],[639],{"type":72,"value":640},"cloneElement",{"type":72,"value":642},", or inspect ",{"type":66,"tag":98,"props":644,"children":646},{"className":645},[],[647],{"type":72,"value":284},{"type":72,"value":649}," on the server, stop and convert it to a render prop",{"type":66,"tag":81,"props":651,"children":653},{"id":652},"review-refactor-checklist",[654],{"type":72,"value":655},"Review \u002F refactor checklist",{"type":66,"tag":242,"props":657,"children":658},{},[659,664,669,689,694,706,719,724],{"type":66,"tag":92,"props":660,"children":661},{},[662],{"type":72,"value":663},"Is the chosen primitive the smallest one that fits?",{"type":66,"tag":92,"props":665,"children":666},{},[667],{"type":72,"value":668},"Does the loader own the RSC, or should Query own it?",{"type":66,"tag":92,"props":670,"children":671},{},[672,674,680,682,687],{"type":72,"value":673},"Are route cache keys complete (",{"type":66,"tag":98,"props":675,"children":677},{"className":676},[],[678],{"type":72,"value":679},"params",{"type":72,"value":681}," + minimal ",{"type":66,"tag":98,"props":683,"children":685},{"className":684},[],[686],{"type":72,"value":147},{"type":72,"value":688},")?",{"type":66,"tag":92,"props":690,"children":691},{},[692],{"type":72,"value":693},"Is invalidation hitting the real cache owner?",{"type":66,"tag":92,"props":695,"children":696},{},[697,699,704],{"type":72,"value":698},"Are query options using ",{"type":66,"tag":98,"props":700,"children":702},{"className":701},[],[703],{"type":72,"value":297},{"type":72,"value":705}," for any RSC value?",{"type":66,"tag":92,"props":707,"children":708},{},[709,711,717],{"type":72,"value":710},"Are mutations explicit ",{"type":66,"tag":98,"props":712,"children":714},{"className":713},[],[715],{"type":72,"value":716},"createServerFn({ method: 'POST' })",{"type":72,"value":718}," calls instead of hidden server actions?",{"type":66,"tag":92,"props":720,"children":721},{},[722],{"type":72,"value":723},"Are server-only imports kept inside server functions or server-only boundaries?",{"type":66,"tag":92,"props":725,"children":726},{},[727,729,734,735,741],{"type":72,"value":728},"Are examples using current names (",{"type":66,"tag":98,"props":730,"children":732},{"className":731},[],[733],{"type":72,"value":367},{"type":72,"value":113},{"type":66,"tag":98,"props":736,"children":738},{"className":737},[],[739],{"type":72,"value":740},".validator",{"type":72,"value":742},") instead of stale ones?",{"type":66,"tag":81,"props":744,"children":746},{"id":745},"debug-fast",[747],{"type":72,"value":748},"Debug fast",{"type":66,"tag":242,"props":750,"children":751},{},[752,763,774,785,796],{"type":66,"tag":92,"props":753,"children":754},{},[755,757],{"type":72,"value":756},"Setup, exports, or stale docs mismatch -> ",{"type":66,"tag":98,"props":758,"children":760},{"className":759},[],[761],{"type":72,"value":762},"docs\u002Fcurrent-api-notes.md",{"type":66,"tag":92,"props":764,"children":765},{},[766,768],{"type":72,"value":767},"Composite Component design or slot bug -> ",{"type":66,"tag":98,"props":769,"children":771},{"className":770},[],[772],{"type":72,"value":773},"docs\u002Fcomposite-components.md",{"type":66,"tag":92,"props":775,"children":776},{},[777,779],{"type":72,"value":778},"Stale data, refetching, loader keys, Query vs Router ownership, or SSR mode -> ",{"type":66,"tag":98,"props":780,"children":782},{"className":781},[],[783],{"type":72,"value":784},"docs\u002Fcaching-refresh-ssr.md",{"type":66,"tag":92,"props":786,"children":787},{},[788,790],{"type":72,"value":789},"Review, refactor, import leaks, error boundaries, or serialization bugs -> ",{"type":66,"tag":98,"props":791,"children":793},{"className":792},[],[794],{"type":72,"value":795},"docs\u002Fdebugging-review.md",{"type":66,"tag":92,"props":797,"children":798},{},[799,801],{"type":72,"value":800},"Architecture and Next\u002FApp Router translation -> ",{"type":66,"tag":98,"props":802,"children":804},{"className":803},[],[805],{"type":72,"value":806},"docs\u002Farchitecture.md",{"type":66,"tag":81,"props":808,"children":810},{"id":809},"copy-paste-patterns",[811],{"type":72,"value":812},"Copy-paste patterns",{"type":66,"tag":242,"props":814,"children":815},{},[816,825,834,843,852,861],{"type":66,"tag":92,"props":817,"children":818},{},[819],{"type":66,"tag":98,"props":820,"children":822},{"className":821},[],[823],{"type":72,"value":824},"examples\u002F01-renderable-route-loader.tsx",{"type":66,"tag":92,"props":826,"children":827},{},[828],{"type":66,"tag":98,"props":829,"children":831},{"className":830},[],[832],{"type":72,"value":833},"examples\u002F02-composite-slots.tsx",{"type":66,"tag":92,"props":835,"children":836},{},[837],{"type":66,"tag":98,"props":838,"children":840},{"className":839},[],[841],{"type":72,"value":842},"examples\u002F03-query-owned-rsc.tsx",{"type":66,"tag":92,"props":844,"children":845},{},[846],{"type":66,"tag":98,"props":847,"children":849},{"className":848},[],[850],{"type":72,"value":851},"examples\u002F04-selective-ssr-data-only.tsx",{"type":66,"tag":92,"props":853,"children":854},{},[855],{"type":66,"tag":98,"props":856,"children":858},{"className":857},[],[859],{"type":72,"value":860},"examples\u002F05-ssr-false-browser-loader.tsx",{"type":66,"tag":92,"props":862,"children":863},{},[864],{"type":66,"tag":98,"props":865,"children":867},{"className":866},[],[868],{"type":72,"value":869},"examples\u002F06-low-level-flight-api-route.tsx",{"type":66,"tag":81,"props":871,"children":873},{"id":872},"default-implementation-sequence",[874],{"type":72,"value":875},"Default implementation sequence",{"type":66,"tag":88,"props":877,"children":878},{},[879,895,900,905,910,915,920],{"type":66,"tag":92,"props":880,"children":881},{},[882,884,889,890],{"type":72,"value":883},"Keep server-only work inside ",{"type":66,"tag":98,"props":885,"children":887},{"className":886},[],[888],{"type":72,"value":179},{"type":72,"value":474},{"type":66,"tag":98,"props":891,"children":893},{"className":892},[],[894],{"type":72,"value":186},{"type":66,"tag":92,"props":896,"children":897},{},[898],{"type":72,"value":899},"Return an RSC from the server function",{"type":66,"tag":92,"props":901,"children":902},{},[903],{"type":72,"value":904},"Consume it through the route loader unless Query has a clear ownership advantage",{"type":66,"tag":92,"props":906,"children":907},{},[908],{"type":72,"value":909},"Add the smallest cache policy that satisfies freshness requirements",{"type":66,"tag":92,"props":911,"children":912},{},[913],{"type":72,"value":914},"Wire invalidation exactly once at the real cache owner",{"type":66,"tag":92,"props":916,"children":917},{},[918],{"type":72,"value":919},"Escalate to Composite Components only when the client must fill slots",{"type":66,"tag":92,"props":921,"children":922},{},[923],{"type":72,"value":924},"Escalate to low-level Flight APIs only when high-level helpers cannot express the transport",{"items":926,"total":1066},[927,941,953,965,980,992,1002,1012,1025,1035,1046,1056],{"slug":928,"name":928,"fn":929,"description":930,"org":931,"tags":932,"stars":938,"repoUrl":939,"updatedAt":940},"aggregation","perform data aggregation in TanStack Table","Aggregate TanStack Table columns independently of grouping, including grand totals, caller-selected row totals, multiple keyed aggregations, custom context-based definitions, grouped merges, manual values, and worker constraints.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[933,936,937],{"name":934,"slug":935,"type":15},"Data Analysis","data-analysis",{"name":20,"slug":21,"type":15},{"name":9,"slug":8,"type":15},28175,"https:\u002F\u002Fgithub.com\u002FTanStack\u002Ftable","2026-07-30T05:25:59.429787",{"slug":942,"name":942,"fn":943,"description":944,"org":945,"tags":946,"stars":938,"repoUrl":939,"updatedAt":952},"api-not-found","diagnose TanStack Table API errors","Diagnose missing TanStack Table v9 exports, options, state slices, and instance methods. Load before inventing an API when code sees a type error, undefined feature method, absent object key, adapter mismatch, or v8-shaped example.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[947,950,951],{"name":948,"slug":949,"type":15},"Debugging","debugging",{"name":20,"slug":21,"type":15},{"name":9,"slug":8,"type":15},"2026-07-30T05:26:05.418735",{"slug":954,"name":954,"fn":955,"description":956,"org":957,"tags":958,"stars":938,"repoUrl":939,"updatedAt":964},"cell-selection","select rectangular cell ranges in tables","Select rectangular cell ranges with cellSelectionFeature: two-corner range state keyed by row and column id, mousedown\u002Fmouseenter handlers, selection edges, render-order resolution under pinning, and autoResetCellSelection. Load when ranges widen unexpectedly after sorting or column reordering, when a drag re-renders the whole table, or when building copy-to-clipboard from a selection.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[959,960,961],{"name":934,"slug":935,"type":15},{"name":9,"slug":8,"type":15},{"name":962,"slug":963,"type":15},"UI Components","ui-components","2026-07-30T05:25:38.403427",{"slug":966,"name":966,"fn":967,"description":968,"org":969,"tags":970,"stars":938,"repoUrl":939,"updatedAt":979},"client-vs-server","manage TanStack Table data pipelines","Choose client or server ownership for filtering, grouping, sorting, expanding, and pagination in TanStack Table v9. Load for manual* flags, mixed pipelines, server counts, or deciding which dataset each row-model stage receives.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[971,974,975,978],{"name":972,"slug":973,"type":15},"Data Pipeline","data-pipeline",{"name":20,"slug":21,"type":15},{"name":976,"slug":977,"type":15},"Performance","performance",{"name":9,"slug":8,"type":15},"2026-07-30T05:25:45.400104",{"slug":981,"name":981,"fn":982,"description":983,"org":984,"tags":985,"stars":938,"repoUrl":939,"updatedAt":991},"column-faceting","build faceted filter UIs","Build faceted filter UIs with columnFacetingFeature, facetedRowModel, facetedUniqueValues, and facetedMinMaxValues. Load for facet counts, numeric ranges, own-filter exclusion, or server-page facet completeness.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[986,989,990],{"name":987,"slug":988,"type":15},"Data Visualization","data-visualization",{"name":20,"slug":21,"type":15},{"name":9,"slug":8,"type":15},"2026-07-30T05:25:41.397257",{"slug":993,"name":993,"fn":994,"description":995,"org":996,"tags":997,"stars":938,"repoUrl":939,"updatedAt":1001},"column-filtering","implement column filtering in TanStack Table","Filter columns with columnFilteringFeature, filteredRowModel, filterFns, filterMeta, nested-row direction, and manualFiltering. Load for accessor compatibility, controlled filter updaters, fuzzy metadata, or client\u002Fserver ownership.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[998,999,1000],{"name":934,"slug":935,"type":15},{"name":20,"slug":21,"type":15},{"name":9,"slug":8,"type":15},"2026-07-30T05:25:53.391632",{"slug":1003,"name":1003,"fn":1004,"description":1005,"org":1006,"tags":1007,"stars":938,"repoUrl":939,"updatedAt":1011},"column-ordering","manage TanStack Table column ordering","Control TanStack Table v9 leaf columnOrder with stable IDs while accounting for pinning regions, visibility, and groupedColumnMode precedence. Load for drag-and-drop columns or rendered order that differs from state.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[1008,1009,1010],{"name":20,"slug":21,"type":15},{"name":9,"slug":8,"type":15},{"name":962,"slug":963,"type":15},"2026-07-30T05:26:03.37801",{"slug":1013,"name":1013,"fn":1014,"description":1015,"org":1016,"tags":1017,"stars":938,"repoUrl":939,"updatedAt":1024},"column-pinning","configure column pinning in TanStack Table","Pin columns into logical start, center, and end regions with columnPinningFeature and renderer-owned sticky CSS. Load for RTL offsets, z-index, backgrounds, overflow, widths, gaps, or overlaps.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[1018,1021,1022,1023],{"name":1019,"slug":1020,"type":15},"CSS","css",{"name":20,"slug":21,"type":15},{"name":9,"slug":8,"type":15},{"name":962,"slug":963,"type":15},"2026-07-30T05:25:55.377366",{"slug":1026,"name":1026,"fn":1027,"description":1028,"org":1029,"tags":1030,"stars":938,"repoUrl":939,"updatedAt":1034},"column-resizing","implement column resizing in TanStack Table","Wire columnResizingFeature, header.getResizeHandler, resize mode and direction, pointer or touch events, and performant CSS-variable updates. Load when resize state changes but widths do not, or large tables resize slowly.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[1031,1032,1033],{"name":20,"slug":21,"type":15},{"name":9,"slug":8,"type":15},{"name":962,"slug":963,"type":15},"2026-07-30T05:25:51.400011",{"slug":1036,"name":1036,"fn":1037,"description":1038,"org":1039,"tags":1040,"stars":938,"repoUrl":939,"updatedAt":1045},"column-sizing","configure column sizing in TanStack Table","Use columnSizingFeature numeric size, minSize, maxSize, getSize, getStart, getAfter, and total-size APIs in table, grid, or flex CSS. Load for auto or percentage misconceptions and sizing\u002Fpinning layout mismatch.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[1041,1042,1043,1044],{"name":1019,"slug":1020,"type":15},{"name":20,"slug":21,"type":15},{"name":9,"slug":8,"type":15},{"name":962,"slug":963,"type":15},"2026-07-30T05:25:48.703799",{"slug":1047,"name":1047,"fn":1048,"description":1049,"org":1050,"tags":1051,"stars":938,"repoUrl":939,"updatedAt":1055},"column-visibility","manage column visibility in TanStack Table","Hide columns with columnVisibilityFeature while rendering visibility-aware header, column, and cell collections. Load when hidden columns remain in the DOM, false-versus-absent state is confused, or enableHiding is misunderstood.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[1052,1053,1054],{"name":20,"slug":21,"type":15},{"name":9,"slug":8,"type":15},{"name":962,"slug":963,"type":15},"2026-07-30T05:25:47.367943",{"slug":1057,"name":1057,"fn":1058,"description":1059,"org":1060,"tags":1061,"stars":938,"repoUrl":939,"updatedAt":1065},"core","build data grids with TanStack Table","Use TanStack Table v9 as a headless data-grid state and row-processing engine. Load for first-table architecture, stable data and columns, row numbering with getDisplayIndex, semantic rendering, framework adapter choice, or deciding what Table owns versus the renderer.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[1062,1063,1064],{"name":934,"slug":935,"type":15},{"name":20,"slug":21,"type":15},{"name":962,"slug":963,"type":15},"2026-07-30T05:25:52.366295",125,{"items":1068,"total":1172},[1069,1086,1101,1115,1128,1147,1158],{"slug":1070,"name":1070,"fn":1071,"description":1072,"org":1073,"tags":1074,"stars":22,"repoUrl":23,"updatedAt":1085},"auth-and-guards","implement route protection in TanStack Router","Route protection with beforeLoad, redirect()\u002Fthrow redirect(), isRedirect helper, authenticated layout routes (_authenticated), non-redirect auth (inline login), RBAC with roles and permissions, auth provider integration (Auth0, Clerk, Supabase), router context for auth state.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[1075,1078,1079,1081,1082],{"name":1076,"slug":1077,"type":15},"Auth","auth",{"name":20,"slug":21,"type":15},{"name":1080,"slug":33,"type":15},"Routing",{"name":9,"slug":8,"type":15},{"name":1083,"slug":1084,"type":15},"TanStack Router","tanstack-router","2026-07-30T05:27:07.639032",{"slug":1087,"name":1087,"fn":1088,"description":1089,"org":1090,"tags":1091,"stars":22,"repoUrl":23,"updatedAt":1100},"auth-server-primitives","implement server-side authentication primitives","Server-side authentication primitives for TanStack Start: session cookies (HttpOnly, Secure, SameSite, __Host- prefix), session read\u002Fissue\u002Fdestroy via createServerFn and middleware, OAuth authorization-code flow with state and PKCE, password-reset enumeration defense, CSRF for non-GET RPCs, rate limiting auth endpoints, session rotation on privilege change. Pairs with router-core\u002Fauth-and-guards for the routing side.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[1092,1093,1096,1099],{"name":1076,"slug":1077,"type":15},{"name":1094,"slug":1095,"type":15},"OAuth","oauth",{"name":1097,"slug":1098,"type":15},"Security","security",{"name":9,"slug":8,"type":15},"2026-07-30T05:26:59.504396",{"slug":1102,"name":1102,"fn":1103,"description":1104,"org":1105,"tags":1106,"stars":22,"repoUrl":23,"updatedAt":1114},"code-splitting","configure code splitting in TanStack Router","Automatic code splitting (autoCodeSplitting), .lazy.tsx convention, createLazyFileRoute, createLazyRoute, lazyRouteComponent, getRouteApi for typed hooks in split files, codeSplitGroupings per-route override, splitBehavior programmatic config, critical vs non-critical properties.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[1107,1110,1111,1112,1113],{"name":1108,"slug":1109,"type":15},"Engineering","engineering",{"name":20,"slug":21,"type":15},{"name":976,"slug":977,"type":15},{"name":9,"slug":8,"type":15},{"name":1083,"slug":1084,"type":15},"2026-07-30T05:27:11.494406",{"slug":1116,"name":1116,"fn":1117,"description":1118,"org":1119,"tags":1120,"stars":22,"repoUrl":23,"updatedAt":1127},"data-loading","manage data loading in TanStack Router","Route loader option, loaderDeps for cache keys, staleTime\u002FgcTime\u002F defaultPreloadStaleTime SWR caching, pendingComponent\u002FpendingMs\u002F pendingMinMs, errorComponent\u002FonError\u002FonCatch, beforeLoad, router context and createRootRouteWithContext DI pattern, router.invalidate, Await component, deferred data loading with unawaited promises.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[1121,1124,1125,1126],{"name":1122,"slug":1123,"type":15},"Caching","caching",{"name":976,"slug":977,"type":15},{"name":9,"slug":8,"type":15},{"name":1083,"slug":1084,"type":15},"2026-07-30T05:26:54.487943",{"slug":1129,"name":1129,"fn":1130,"description":1131,"org":1132,"tags":1133,"stars":22,"repoUrl":23,"updatedAt":1146},"deployment","deploy TanStack Start applications","Deploy to Cloudflare Workers, Netlify, Vercel, Node.js\u002FDocker, Bun, Railway. Selective SSR (ssr option per route), SPA mode, static prerendering, ISR with Cache-Control headers, SEO and head management.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[1134,1137,1139,1142,1143],{"name":1135,"slug":1136,"type":15},"Cloudflare","cloudflare",{"name":1138,"slug":1129,"type":15},"Deployment",{"name":1140,"slug":1141,"type":15},"Netlify","netlify",{"name":9,"slug":8,"type":15},{"name":1144,"slug":1145,"type":15},"Vercel","vercel","2026-07-30T05:26:50.509927",{"slug":1148,"name":1148,"fn":1149,"description":1150,"org":1151,"tags":1152,"stars":22,"repoUrl":23,"updatedAt":1157},"execution-model","manage isomorphic execution models","Isomorphic-by-default principle, environment boundary functions (createServerFn, createServerOnlyFn, createClientOnlyFn, createIsomorphicFn), ClientOnly component, useHydrated hook, import protection, dead code elimination, environment variable safety (VITE_ prefix, process.env).",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[1153,1156],{"name":1154,"slug":1155,"type":15},"Architecture","architecture",{"name":9,"slug":8,"type":15},"2026-07-30T05:27:04.558441",{"slug":1159,"name":1159,"fn":1160,"description":1161,"org":1162,"tags":1163,"stars":22,"repoUrl":23,"updatedAt":1171},"middleware","implement TanStack Router middleware","createMiddleware, request middleware (.server only), server function middleware (.client + .server), context passing via next({ context }), sendContext for client-server transfer, global middleware via createStart in src\u002Fstart.ts, middleware factories, method order enforcement, fetch override precedence.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[1164,1167,1168,1170],{"name":1165,"slug":1166,"type":15},"Backend","backend",{"name":20,"slug":21,"type":15},{"name":1169,"slug":1159,"type":15},"Middleware",{"name":9,"slug":8,"type":15},"2026-07-30T05:26:58.546019",30]