Server Component examples
Each route demonstrates a distinct pattern from TanStack Start's RSC API. The server runs on Cloudflare Workers — no Node, no edge runtime restrictions.
- Markdown + Shiki highlighting
renderServerComponentServer parses markdown with `marked` and highlights code blocks with `shiki`. Neither library (~2MB combined) ships to the browser.
- Streaming dashboard
renderServerComponent + Suspense + use()Three widgets with different artificial latencies. Each streams in independently via React Suspense as its data resolves.
- Streaming feed (async generator)
async function* + for awaitServer yields items one at a time via `async function*`. Client appends to the list as each arrives — like a live log tail.
- Composite product cards
createCompositeComponentServer fetches product info and renders structure. Client provides the interactive Add-to-Cart button via a component slot.
- Notes — form + mutation + invalidation
createServerFn({ method: 'POST' }) + validatorClassic CRUD. Form submits to a POST server function, then `router.invalidate()` refetches the loader and updates the list.
- RSC → React Query handoff
prefetchQuery + useQuery + useMutationServer prefetches the list, ships the query cache in HTML. Client `useQuery` reads the pre-hydrated cache. Stars are optimistic mutations with rollback.
- Infinite scroll
prefetchInfiniteQuery + useInfiniteQueryServer prefetches page 1 (instant first paint). IntersectionObserver fires `fetchNextPage()` as you scroll — pages stream in client-side via `useInfiniteQuery`.
- Live polling dashboard
prefetchQuery + useQuery + refetchIntervalServer prefetches initial values, then `useQuery` polls every N seconds. Pulse indicator shows when react-query refetches in the background — no loading flash.
- Presence + chat (WebSocket DO)
Hibernatable DurableObject + WebSocketPairLive presence + chat backed by a Durable Object inside this same worker. Open in two windows — viewer count and messages sync in real time.
- Channels (server fn → DO RPC)
createServerFn + DO RPC + loader prefetchMulti-channel chat. Loader subscribes you via a server function that calls the DO via RPC. Sends round-trip through validate + rate-limit + persist + fan out. The DO has zero auth code.