JavaScript Interview Question #173

What is the difference between client-side rendering and server-side rendering?

Performance, Browser APIs, Rendering & Modern Web Architecture Senior Advanced

Quick Interview Answer

Client-side rendering sends enough HTML and JavaScript for the browser to build or update much of the user interface after scripts execute. Server-side rendering generates HTML on the server for the request and sends that rendered markup to the browser.

Detailed Explanation

Many modern applications use hybrid approaches. The best choice depends on requirements such as initial rendering speed, SEO, interactivity, caching, server cost, personalization, and application architecture rather than one approach always being superior.

Code Example

// Client-side rendering example:
const response = await fetch("/api/products");
const products = await response.json();

document.querySelector("#count")
    .textContent = products.length;

// With SSR, the server can send the initial product HTML
// before client-side JavaScript becomes interactive.