webdev-ssr-conversion

Split the app into entry-server.tsx (renderToString) and entry-client.tsx (hydrateRoot), prefetch each route's queries into a QueryClient, dehydrate and embed the state in the HTML, and have Express compose per-route head tags. The Skill's checklist walks through each file for the Manus template.

Build an in-process caller with appRouter.createCaller(ctx) so SSR calls procedures as plain functions while keeping ctx.user from the cookie. Seed results into the query cache with getQueryKey using the exact input shape the component's useQuery produces.

No. It targets only the Manus web-db-user template: React 19, Vite 7, Express 4, tRPC 11, wouter, TanStack Query 5, and superjson. Next.js, Remix, and Astro already render on the server and need no conversion.

Browser globals like window, document, and localStorage are undefined in Node, so any access on the render path crashes the server render. Guard app code with typeof window checks, and keep dependencies that touch window at module scope out of the server import graph.

TanStack Query v5 defaults staleTime to 0, so hydrated data is instantly stale and refetches on mount. Set a staleTime on the client QueryClient and ensure prefetched query keys exactly match the component's useQuery input, including types and URL decoding.

Only a genuine miss (null result or NOT_FOUND error) may return 404 with noindex; transient backend errors must degrade to the 200 shell or crawlers will deindex real pages. Auth-gated routes return 200 with default head and noindex, never prefetched private data.