webdev-ssr-conversion

Split the app into entry-server.tsx (renderToString with prefetched queries) and entry-client.tsx (hydrateRoot with HydrationBoundary), then have Express render each route and inject per-route head tags and dehydrated state into the HTML template. The Skill provides a step-by-step checklist and full annotated source for every file.

Client-rendered SPAs serve an empty div and rely on JavaScript to render content, which crawlers that do not execute JS never see. Server-side rendering produces the full HTML on the server with data already fetched, so crawlers and social scrapers receive populated first-paint markup.

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. 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 browser globals at module scope out of the server import graph via lazy loading or client gating.

The prefetched query key must exactly match the component's useQuery key, including input shape and types, and the client QueryClient needs a staleTime so hydrated data is not instantly stale. Also deserialize the embedded state with superjson before passing it to HydrationBoundary.

Only a genuine miss, such as a null result or a NOT_FOUND error from the procedure, may return 404 with noindex. Transient backend errors must degrade to the 200 shell, or search engines will deindex real pages during outages.