Server-Side Rendering (SSR)
Server-Side Rendering (SSR) is a technique where a web page's HTML is generated on the server for each request and sent fully formed to the browser, rather than being built up entirely by client-side JavaScript.
Definition
Server-Side Rendering (SSR) is a technique where a web page's HTML is generated on the server for each request and sent fully formed to the browser, rather than being built up entirely by client-side JavaScript.
Overview
Before the era of JavaScript-heavy Single Page Applications, nearly all websites were server-rendered by default. As frameworks like React and Angular moved rendering to the client, developers ran into slower perceived load times and weaker search-engine indexing, since crawlers and users had to wait for JavaScript to download and execute before seeing content. SSR re-introduces server-generated HTML for these frameworks, so the browser receives a fully rendered page immediately, then JavaScript 'hydrates' it into an interactive application (see Hydration). Modern meta-frameworks make SSR practical to adopt without giving up a component-based development model: Next.js for React, Nuxt.js for Vue, and SvelteKit for Svelte all run application code on the server per request, producing HTML that's sent to the browser alongside the JavaScript needed for interactivity. This differs from Static Site Generation (SSG), which pre-renders pages once at build time rather than on every request. SSR generally improves perceived performance (faster first paint) and SEO compared to pure client-side rendering, at the cost of added server infrastructure and complexity — every page request now involves server-side compute, and developers must be careful to write code that works correctly both on the server (no direct DOM access) and the client.
Key Concepts
- HTML generated per request on the server, not solely in the browser
- Improves first paint / perceived load time compared to pure client rendering
- Better default SEO since crawlers receive fully rendered HTML
- Followed by client-side hydration to attach interactivity
- Implemented by meta-frameworks like Next.js, Nuxt.js, and SvelteKit
- Requires server infrastructure capable of running application code per request
Use Cases
Frequently Asked Questions
From the Blog
Best Side Hustles: How to Choose One That Actually Fits
The best side hustle is the one that matches your available time, existing skills, and risk tolerance, not whichever trend is loudest online. This guide breaks down common side hustle categories and how to evaluate which one fits your situation.
Read More AI & TechnologyHow to Earn Money From Home With a Real Side Hustle
Earning money from home reliably comes down to picking a skill-based, service-based, or content-based option that matches your time and abilities, then committing to it consistently. This guide breaks down realistic paths and how to evaluate them.
Read More ProgrammingClient-Server Architecture Explained Simply
Client-server architecture is a model where client applications request services and server applications provide them over a network. This guide breaks down how requests, responses, and communication protocols fit together in practice.
Read More ProgrammingHow React Works: Rendering, State, and Reconciliation
React runs your components to produce a description of the UI, compares it with the previous description, and applies the differences to the DOM. Learn the render-and-commit cycle, why state updates are batched, how reconciliation uses keys, and how that explains most of the bugs you will hit.
Read More