Server-Side Rendering: Your App's First Paint Matters
Server-Side Rendering (SSR) sends a fully-formed HTML page from the server, not a blank one. This speeds up the first paint and helps SEO. The footgun is assuming it's always faster; it increases server load and can delay interactivity.
WHY IT EXISTS Modern JavaScript frameworks often send a blank HTML page and a large script file. The browser shows nothing until it downloads and runs the script to build the page. This can be slow, leaving users staring at a blank screen. SSR fixes this by doing the initial work on the server.
THE MENTAL MODEL SSR is about sending a pre-built webpage instead of a do-it-yourself kit. The server constructs the full HTML for the page the user requested and sends that. The browser can show this immediately, making the site feel much faster. The client-side JavaScript then loads in the background to make the page interactive.
HOW IT WORKS When a user requests a URL, a server-side process (often Node.js) runs your application code to generate the complete HTML for that specific page. This HTML is sent as the initial response. The browser renders this static content instantly. Meanwhile, the browser also downloads the client-side JavaScript bundle. Once loaded, this script 'hydrates' the static HTML, attaching event listeners and turning it into a fully interactive Single-Page Application without a full page reload.
WHEN TO USE IT Use SSR when initial load performance and SEO are critical. This is common for public-facing content like e-commerce sites, news articles, and marketing pages. If getting content in front of a user seconds faster improves your metrics, SSR is a strong choice.
WHEN NOT TO USE IT Avoid SSR for apps behind a login where SEO doesn't matter, like admin dashboards or complex tools. The added server complexity and cost may not be justified. Pure Client-Side Rendering is simpler to develop and deploy for these use cases.
ONE CANONICAL EXAMPLE A user visits a product page. Without SSR, they see a loading spinner for 2 seconds. With SSR, the server sends the complete HTML with the product name, image, and price. The user sees the page content in under a second. They can't click 'Add to Cart' until the JavaScript hydrates a moment later, but they can immediately start reading the description.
Read the original → en.wikipedia.org
Get five bites like this every day.
Tezvyn delivers a daily feed of 60-second tech bites with quizzes to lock in what you learn.