← Lessons

quiz vs the machine

Silver1050

Frontend

The Client Side Rendering

Ship a near empty page and let JavaScript build the whole UI in the browser at runtime.

4 min read · intro · beat Silver to climb

What client side rendering is

In client side rendering the server sends a nearly empty HTML shell plus a JavaScript bundle. The browser downloads and runs that bundle, which then fetches data and builds the entire interface in the page.

  • The first response holds little visible content, often just a root div.
  • The user sees nothing useful until the bundle parses and runs.
  • After that first load, navigation feels instant because the app is already in memory.

Tradeoffs to weigh

Client side rendering shines for highly interactive apps behind a login, like dashboards, where search engines and first paint matter less.

  • Pros are cheap hosting on static files, rich interactivity, and snappy in app navigation.
  • Cons are a slow first paint, weaker default SEO, and heavy work on low end devices.
  • A blank screen during the bundle download is the classic complaint.

You can soften the wait with a loading skeleton, but the core cost is that meaningful pixels depend on JavaScript finishing first.

Key idea

Client side rendering trades a slower first paint and weaker default SEO for cheap static hosting and fast in app navigation, because the browser builds the whole UI from a JavaScript bundle.

Check yourself

Answer to earn rating on the learn ladder.

1. What does the server send first in client side rendering?

2. Which is a common drawback of client side rendering?