← Lessons

quiz vs the machine

Silver1080

Frontend

The Server Side Rendering

Render HTML on the server for each request so users and crawlers see content before JavaScript runs.

4 min read · intro · beat Silver to climb

How server side rendering works

In server side rendering the server runs your components for each request and returns fully formed HTML. The browser paints that HTML immediately, then a JavaScript bundle attaches behavior so the page becomes interactive.

  • The first response already contains visible, meaningful content.
  • First paint is fast and crawlers can read real text.
  • The page is not interactive until hydration finishes.

When it helps and what it costs

Server side rendering fits content that must load fast and be indexable, like marketing pages, blogs, and product listings.

  • Pros are quick first paint, strong SEO, and good behavior on slow devices.
  • Cons are per request server compute, more infrastructure, and a gap between visible and interactive.
  • That gap can let a user click a button that does nothing yet.

You pay for rendering on every request, so heavy traffic needs caching or scaling. The reward is users seeing real content almost at once instead of a blank shell.

Key idea

Server side rendering returns ready HTML per request for fast first paint and strong SEO, at the cost of per request server compute and a window before hydration makes the page interactive.

Check yourself

Answer to earn rating on the learn ladder.

1. What does the server return in server side rendering?

2. What is a key cost of server side rendering?