← Lessons

quiz vs the machine

Gold1430

System Design

The Server Side vs Client Rendering Tradeoff

Decide where HTML is built and how it affects speed, SEO, and load.

5 min read · core · beat Gold to climb

Where does the HTML come from

Rendering is the step that turns data into HTML the browser shows. You can do it on the server or in the browser.

  • Server side rendering builds full HTML on each request and sends ready to display markup.
  • Client side rendering sends a thin shell and JavaScript that fetches data and builds the page in the browser.

The flow compared

Server rendering returns content in one round trip; client rendering needs extra fetches after loading the bundle.

Tradeoffs

  • Server rendering gives faster first paint and better SEO, but uses more server CPU per request.
  • Client rendering offloads work to the browser and enables rich interactivity, but the first view is slower.
  • Hydration combines both, sending server HTML then attaching client behavior.

Practical notes

  • Use server rendering for content and marketing pages that need SEO.
  • Use client rendering for highly interactive app shells behind login.
  • Many frameworks blend the two per route.

Key idea

Server rendering wins first paint and SEO while client rendering wins interactivity, so pick per route or blend them with hydration.

Check yourself

Answer to earn rating on the learn ladder.

1. Which rendering approach generally gives a faster first paint and better SEO?

2. What does hydration do?