Server-Side Rendering
Producing a page's HTML on the server so the first response is already content.
Server-side rendering generates a page's HTML on the server and sends it complete, rather than shipping an empty shell and building the page in the browser. The visitor sees content on the first paint instead of after a script has downloaded, parsed, executed, and fetched data.
The benefits are concrete: faster perceived load, content that exists without JavaScript, and markup that crawlers and link previewers can read without executing anything. See Core Web Vitals and Search Engine Optimization.
The costs are equally concrete. The server does per-request work, so caching becomes load-bearing. Code must run in an environment with no window, no document, and no browser APIs. And any interactivity must be attached to the delivered markup afterward, which is Hydration — historically the source of most of the complexity, since the client must reproduce exactly what the server produced or the reconciliation goes wrong.
SSR sits on a spectrum with Static Site Generation (render once at build time) and client rendering (render entirely in the browser). Modern frameworks mix all three within one application, choosing per route or per component, which is why the meaningful question is usually not "is this app server-rendered" but "where is the Client-Server Boundary".
See also4
Hand-picked in the note itself — the neighbours worth reading next.
React Server Components
Components that execute only on the server and never ship their code to the browser.
Web Platform16 connections
Islands Architecture
Rendering a page as static HTML with small independently interactive regions.
Web Platform15 connections
Incremental Static Regeneration
Serving a cached static page while regenerating it in the background after a chosen interval.
Web Platform10 connections
Progressive Enhancement
Building so the core experience works without scripts, with richer behaviour layered on top.
Web Platform14 connections
Linked from18
Notes elsewhere in the wiki that reach for this one.
- Cache InvalidationWeb Platform
Deciding when a cached value has stopped being correct — famously one of the hard problems.
- Client-Server BoundaryWeb Platform
The line in an application where execution moves from the server to the browser.
- Code SplittingWeb Platform
Dividing an application bundle so a page downloads only the code it needs.
- Core Web VitalsWeb Platform
Google's small set of user-centred performance metrics: loading, interactivity, and visual stability.
- Critical Rendering PathWeb Platform
The sequence of steps between receiving HTML and painting pixels, and everything that blocks it.
- HydrationWeb Platform
Attaching client-side behaviour to server-rendered markup without rebuilding it.
- Incremental Static RegenerationWeb Platform
Serving a cached static page while regenerating it in the background after a chosen interval.
- Islands ArchitectureWeb Platform
Rendering a page as static HTML with small independently interactive regions.
- Lazy LoadingWeb Platform
Deferring the fetch of a resource until it is needed, or until the browser is idle.
- Module GraphWeb Platform
The directed graph of imports that decides what code ends up where.
- Performance BudgetWeb Platform
A committed numeric ceiling on a page's cost, enforced automatically.
- Progressive EnhancementWeb Platform
Building so the core experience works without scripts, with richer behaviour layered on top.
- React Server ComponentsWeb Platform
Components that execute only on the server and never ship their code to the browser.
- RSSData & Content
A syndication format letting readers subscribe to a site without an intermediary.
- Search Engine OptimizationData & Content
Making content discoverable through search, most of which is ordinary quality work.
- Static Site GenerationWeb Platform
Rendering every page to a file at build time, so serving is just handing over bytes.
- Streaming ResponseNetworks & Distribution
Delivering a response incrementally as it is produced rather than all at once when complete.
- Web Font LoadingWeb Platform
How custom typefaces are fetched and shown, and why the cost is easy to misattribute.