server-components

Enable RSC in vite.config with tanstackStart({ rsc: { enabled: true } }) plus @vitejs/plugin-rsc, then return a component from a createServerFn using renderServerComponent and consume it in the route loader. Use createCompositeComponent only when the client must fill slots.

renderServerComponent returns a renderable fragment with no slot support, while createCompositeComponent accepts client-provided children, render props, or component props as placeholders the client fills later. Choose the composite form only when interactivity must sit inside server-rendered markup.

Set structuralSharing: false on the query options so Query does not merge RSC values across fetches, prefetch with ensureQueryData in the loader, and read with useSuspenseQuery. Invalidate with queryClient.invalidateQueries since Query owns freshness.

Stale data usually means invalidation targeted the wrong cache owner. Use router.invalidate() for loader-owned fragments, invalidateQueries for Query-owned fragments, and bust response headers for HTTP-cached GET server functions.

No, slot payloads are opaque placeholders on the server, so child inspection does nothing useful. Convert the pattern to a render prop that receives explicit serializable data from the server instead.

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.