Module 1: Rendering Foundations

🟦 Module 1: Rendering Foundations

In this module, we will explore the three primary ways to deliver a React application to a browser: CSR, SSR, and SSG.

🏗️ 1. The Mechanic: Client-Side Rendering (CSR)

In a traditional React app (like Vite or Create-React-App), the server sends a nearly empty HTML file and a giant JavaScript bundle. The browser then executes the JS to build the UI.

🧩 The Problem: “The White Screen”

If your JS bundle is 2MB, your user sees a white screen until that 2MB is downloaded and executed.

The CSR Pattern:

// This runs only in the browser
function Profile() {
  const [user, setUser] = useState(null);

  useEffect(() => {
    fetch('/api/user').then(res => res.json()).then(setUser);
  }, []);

  if (!user) return <div>Loading...</div>; // ⏳ User waits here
  return <div>Welcome, {user.name}</div>;
}

🏗️ 2. The Abstraction: Server-Side Rendering (SSR)

Next.js allows you to pre-render the HTML on the server. The user gets a fully formed page immediately, and the JavaScript “hydrates” it later to make it interactive.

The “Raw” Implementation (Example)

In a vanilla Node app using Express, we would manually handle this:

// server.js (Express)
import React from 'react';
import { renderToString } from 'react-dom/server';
import App from './App';

app.get('*', (req, res) => {
  const content = renderToString(<App />);
  const html = `
    <html>
      <body>
        <div id="root">${content}</div>
        <script src="/bundle.js"></script> <!-- Client-side bundle -->
      </body>
    </html>
  `;
  res.send(html);
});

The Next.js Way

In Next.js, this entire setup is reduced to a single file:

// app/page.tsx
export default function Page() {
  return <h1>Hello from Next.js SSR</h1>;
}

🧪 Professor’s Challenge: The CSR vs SSR Race

Task: Build two simple pages.

Page A (CSR): Use useEffect and fetch with a 3-second delay in the API. Notice the loading spinner.
Page B (SSR): Use getServerSideProps with a 3-second delay. Notice how the whole page wait for the server before appearing.

Insight: Which is better? SSR feels faster once it appears, but CSR feels more responsive initially. In Module 3, we will see how Streaming gives you the best of both worlds!