SSR Rendering Process

Server-side rendering (SSR) is the technique of executing a JavaScript framework's rendering logic on the server to produce a fully-formed HTML string, which is sent to the browser and displayed before any client-side JavaScript executes.

The motivation is performance and SEO. In a pure client-side SPA, the browser receives a near-empty HTML shell and must download, parse, and execute JavaScript before rendering any content — a process that can take 2–5 seconds on mid-range mobile devices. With SSR, the server delivers complete HTML immediately, so the browser can paint meaningful content during the first HTTP response. Search engine crawlers also benefit because they can index the full page content without executing JavaScript.

The SSR process begins when a user requests a URL. The server (typically a Node.js process running the same framework code used on the client) receives the request, fetches any data required by the page (from databases, APIs, or cache), and runs the framework's render-to-string function — React's renderToString, Vue's @vue/server-renderer, or the equivalent. This produces an HTML string with all component output pre-rendered, plus a serialized representation of the data used (the dehydrated state) embedded in a