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 highlightingrenderServerComponent
Server parses markdown with `marked` and highlights code blocks with `shiki`. Neither library (~2MB combined) ships to the browser.
Streaming dashboardrenderServerComponent + 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 await
Server yields items one at a time via `async function*`. Client appends to the list as each arrives — like a live log tail.
Composite product cardscreateCompositeComponent
Server fetches product info and renders structure. Client provides the interactive Add-to-Cart button via a component slot.
Notes — form + mutation + invalidationcreateServerFn({ method: 'POST' }) + validator
Classic CRUD. Form submits to a POST server function, then `router.invalidate()` refetches the loader and updates the list.
RSC → React Query handoffprefetchQuery + useQuery + useMutation
Server prefetches the list, ships the query cache in HTML. Client `useQuery` reads the pre-hydrated cache. Stars are optimistic mutations with rollback.
Infinite scrollprefetchInfiniteQuery + useInfiniteQuery
Server prefetches page 1 (instant first paint). IntersectionObserver fires `fetchNextPage()` as you scroll — pages stream in client-side via `useInfiniteQuery`.
Live polling dashboardprefetchQuery + useQuery + refetchInterval
Server 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 + WebSocketPair
Live 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 prefetch
Multi-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.