How does SSR affect page load speed?

SSR (server-side rendering) makes the page load visually faster, especially on the first visit.

Here is how it works and what it affects:

---

#1. The first screen appears sooner

Without SSR (CSR):

• the browser receives an empty HTML shell
• it waits for JavaScript to load
• then it renders the content on the client There is a delay before the text, buttons, and structure appear

With SSR:

• the server has already generated the HTML
• the browser immediately draws the finished page The user sees the content almost right away

Outcome: First Contentful Paint (FCP) and Time to First Byte (TTFB) are reduced

---

#2. Less work for weaker devices

In CSR: all the JavaScript loads and runs in the browser → load on a mobile device or an older computer

In SSR: most of the work is done by the server → the browser only has to display the result

Result: less lag, less loading

---

#3. Optimal UX: HTML first, then interactivity

The user sees the text, images, and structure right away → and JavaScript "brings the page to life" a bit later (hydration)

This creates a sense of speed, even while background logic is still loading

---

#There is a nuance though:

SSR speeds up the first paint, but it can add delay when navigating between pages if the server renders them every time.

This is solved with caching and pre-rendering strategies.

---

#Conclusion:

• SSR speeds up the display of the first screen
• Reduces the load on the client
• Makes the site feel "alive" right away, without a gray screen
• But it requires careful setup to balance the server and the client.