What does client-side rendered mean?

Client-side rendered means the HTML for a web page is generated in your browser by JavaScript, as opposed to server-rendered where the page is built on the server before being sent to the browser.

When you visit a client-side rendered page, your browser receives mostly empty HTML with some JavaScript. That JavaScript then builds the entire page in your browser. This is why you often see loading spinners when visiting these sites.

This approach became popular with Single Page Applications (SPAs) and frameworks like React, Vue, and Angular. These frameworks make it easier to build interactive applications where content updates without full page reloads.

The pros are that you can build highly interactive experiences that feel smooth and responsive. Once the JavaScript loads, navigating around feels instant because there are no full page refreshes. It’s great for building app-like experiences in the browser.

The cons are complexity and initial load time. You need to coordinate between server APIs and client code. The initial page load can be slow because the browser has to download and execute JavaScript before showing anything. And it’s not great for SEO since search engines have historically struggled with JavaScript-heavy sites, though this has improved.

You’ll also hear the term SSR thrown around in this context. Modern frameworks like Next.js and Nuxt try to get the best of both worlds by doing some rendering on the server and some in the client.

See also What does server-rendered mean?