Server Rendering Strategies in React

Learning Outcome Guide

At the end of this class, you should be able to…

Explain the principles of server-side rendering and how it differs from client rendering.
Describe the benefits and trade-offs of SSR in terms of performance, SEO, and complexity.
Explore how frameworks such as React Router v7 and Next.js implement SSR and hybrid rendering.

Additional Notes:

Emphasize that students are not expected to implement full SSR yet (focus on understanding its purpose and process).
Time permitting, compare with Next.js as a reference framework to show SSR, static generation, and hybrid options conceptually.
React 19 introduces enhancements for streaming and progressive hydrationâ€”mention as a future direction.
Prepare to transition from rendering strategies to state management patterns in the next lesson.

Demo project structure

The SSR demo project is intentionally small:

lesson-22-ssr-demo/
├── package.json
├── server.js
└── public/
    └── client.js

We are using this project to demonstrate the idea of SSR clearly before looking at framework-supported SSR.

Lesson focus

This lesson introduces server-side rendering (SSR) and compares it to client-side rendering (CSR).

We will:

examine how SSR works conceptually
compare CSR and SSR behavior
observe how HTML is delivered differently
understand hydration
explore how frameworks support SSR
identify when SSR is appropriate

This lesson is primarily conceptual with light implementation.

Connecting to prior lessons

In Lesson 21, we learned:

React apps commonly use client-side rendering
the browser builds the UI after JavaScript loads
the initial HTML is minimal

This creates a key limitation:

The user may see a blank or incomplete page before the app loads.

Phase 1: The problem CSR creates

In a CSR application:

HTML loads -> JavaScript loads -> React renders -> UI appears

This can result in:

delayed first content
poor perceived performance
heavy reliance on JavaScript

Phase 2: What is Server-Side Rendering?

Server-side rendering means:

the server generates HTML for the requested route
the browser receives ready-to-display content
JavaScript loads afterward to enable interactivity

SSR flow

User requests page -> Server renders HTML -> Browser displays content immediately -> JavaScript loads -> React hydrates the page

Key idea

SSR improves time to first content and perceived performance.

Phase 3: Simple SSR demo

Open the SSR demo project and inspect the server.js file.

You should see something similar to this:

app.get('/', (req, res) => {
  res.send(`
    <html>
      <body>
        <h1>Server Rendered Page</h1>
        <p>This content was generated on the server.</p>
        <script src="/client.js"></script>
      </body>
    </html>
  `);
});

Supporting files

The demo also includes a small client script in:

public/client.js

That script simulates hydration by attaching behaviour after the HTML has already been rendered and displayed.

What to notice

the HTML already contains visible content
no JavaScript is required to see the page
the browser renders immediately

Compare with CSR

CSR HTML:

<div id="root"></div>

SSR HTML:

<h1>Server Rendered Page</h1>

Phase 4: Hydration

SSR alone is not enough.

The application must still become interactive.

What is hydration?

Hydration is:

React attaching behaviour to server-rendered HTML

For example, the client script may include logic like:

document.getElementById('test-btn')?.addEventListener('click', () => {
  alert('Button is now interactive');
});

The key idea is that the HTML was already visible before this script made the page interactive.

Hydration flow

Server -> HTML
Client -> JavaScript loads
React -> attaches event handlers
UI -> becomes interactive

Important distinction

SSR provides content early
hydration enables interactivity

Phase 5: Observe SSR in DevTools

Open DevTools -> Network -> Document

Reload the SSR page.

What you should see

HTML contains real content
content appears immediately
JavaScript loads afterward

Compare with CSR

CSR:

HTML is minimal
content appears after JavaScript runs

SSR:

HTML contains content
content appears immediately

Phase 6: Hybrid rendering

Modern applications often combine rendering strategies.

Hybrid approach

some routes use SSR
some routes use CSR
some routes are pre-rendered

Example

marketing page -> SSR
admin dashboard -> CSR
blog -> pre-rendered

Key idea

Rendering strategy is a design decision, not a fixed rule.

Phase 7: Frameworks and SSR

Modern frameworks handle SSR for you.

Examples:

React Router (framework mode)
Next.js
Remix (Now React Router)

What frameworks do

render routes on the server
run loaders on the server
send HTML to the browser
hydrate on the client

Important distinction

We do not typically build SSR manually.

Frameworks manage the complexity.

Phase 8: Compare CSR and SSR

Client-Side Rendering (CSR)

browser renders UI
minimal initial HTML
requires JavaScript before content appears

Server-Side Rendering (SSR)

server renders HTML
content appears immediately
JavaScript enhances interactivity

Summary comparison

Feature	CSR	SSR
Initial content	Delayed	Immediate
Interactivity	After JS	After hydration
Complexity	Lower	Higher
Performance perception	Lower	Higher

Phase 9: Advantages of SSR

faster initial content display
improved perceived performance
better SEO support
works better on slower devices

Phase 10: Tradeoffs of SSR

more complex architecture
requires a server environment
more complex deployment
hydration still required

Key Concepts Reinforced

SSR moves rendering to the server
hydration connects server-rendered HTML to React
CSR and SSR solve different problems
hybrid rendering is common in real applications
frameworks simplify SSR implementation

Assessment

Students should be able to explain:

what SSR is
how SSR differs from CSR
what hydration is
one advantage of SSR
one tradeoff of SSR

Student Exercise

Answer the following questions:

What is server-side rendering?
What problem does SSR solve?
What is hydration?
When might SSR be a better choice than CSR?

Group Activity (Time Permitting)

Determine the best rendering strategy for each:

marketing website
admin dashboard
blog platform
real-time collaboration app

Be prepared to explain your reasoning.