Server and client rendering

At a glance

Server work

Runs outside the visitor's browser

Client work

Runs in the visitor's browser

Overview

Server rendering produces interface output in a server environment, while client rendering performs work in the browser. Modern applications can combine both. The useful boundary depends on data access, initial content, interactive behavior, and which environment provides the necessary capabilities.

What differs

Server code can access server-side resources without shipping those capabilities to the browser. Client code can respond to browser events and use browser APIs, but downloaded code and data are available to that client.

Choose by the task

Place work according to its environment requirements. Rendering content on a server can supply an initial page, while client-side components can handle interaction that depends on browser state or user events.

Common confusion

A server-rendered page can still include client-side interaction. Do not treat the two approaches as mutually exclusive, or assume that moving rendering alone solves caching, authorization, or loading behavior.

Sources and review

MOOR's explanatory text is supported by the following source links.

1. Server and client components — Next.js
2. Server-side website programming — MDN Web Docs