webdev-ssr-conversion

Split the app into entry-server.tsx (renderToString with prefetched data) and entry-client.tsx (hydrateRoot), prefetch each route's queries into a QueryClient, dehydrate the state into the HTML, and let the server inject per-route title and meta tags. This Skill provides the full checklist and copy-adaptable source for the Manus tRPC template.

Build an in-process caller with appRouter.createCaller(ctx) so SSR prefetch runs procedures as plain function calls, preserving ctx.user from the cookie without HTTP loopback. Seed results into the query cache under the exact getQueryKey the component's useQuery produces.

No. The conversion targets only the Manus web-db-user template stack: React 19, Vite 7, Express 4, tRPC 11, wouter, TanStack Query 5, and superjson. Frameworks like Next.js or Remix 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 renderToString and silently falls back to the empty shell. Guard app code with typeof window checks, and keep dependencies that touch window at module scope out of the server import graph.

Common causes are express.static serving index.html before the SSR handler, a render exception falling back to the SPA shell, or a React.lazy route emitting only its Suspense fallback. The bundled verify-ssr.sh script asserts body content inside #root and correct status codes to catch these.

It covers only SSR rendering and head tags; sitemap.xml, robots.txt, JSON-LD structured data, and RSS feeds are explicit follow-ups. Auth-gated routes stay client-rendered with 200 plus noindex, and SSR HTML defaults to Cache-Control: no-cache because dehydrated state can be per-user.