Rendering in Next.js - Overview of Strategies

In Quantum Metropolis, information reaches residents in different ways - holographic screens on streets display content in real time, information boards generate content in advance, and personal terminals fetch data on demand. Similarly, Next.js offers several page rendering strategies, each with its own use case.

In this chapter, you'll learn about the four main rendering strategies in Next.js. We won't go into deep technical details - that's a topic for module 5. For now, we want you to understand that these strategies exist and know when each of them makes sense.

What is Rendering?

Rendering is the process of converting React code (JSX) into HTML that the browser can display to the user. The key question is: where and when does this process take place?

1// This React component...
2export default function Hello() {
3  return <h1>Welcome to Quantum Metropolis!</h1>;
4}
5
6// ...gets converted to HTML:
7// <h1>Welcome to Quantum Metropolis!</h1>

Depending on the chosen strategy, this conversion can happen:

• On the server - before the page reaches the browser
• In the browser - after downloading JavaScript code
• During building - even before the server is started

SSR - Server-Side Rendering

Imagine that in Quantum Metropolis, a holographic screen generates an image in the control center and transmits the finished hologram for display. The user sees a complete image immediately after opening the transmission.

SSR means the server renders the HTML page with every user request. When someone visits a page, the server:

1. Fetches the necessary data (from a database, API)
2. Generates complete HTML
3. Sends the finished page to the browser

1// Server Component in Next.js - rendered on the server by default
2export default async function DashboardPage() {
3  // Data fetched with EVERY request
4  const stats = await fetch('https://api.quantum.com/stats');
5  const data = await stats.json();
6
7  return (
8    <div>
9      <h1>Quantum Panel</h1>
10      <p>Active users: {data.activeUsers}</p>
11      <p>Last update: {data.timestamp}</p>
12    </div>
13  );
14}

When to use SSR?

• When data changes frequently (e.g., user dashboard, shopping cart)
• When content must be current on every refresh
• When you need SEO for dynamic content

SSG - Static Site Generation

In Quantum Metropolis, information boards with schedules are printed once a day and posted at stops. They don't change every second - they are prepared in advance.

SSG means HTML pages are generated during application building (`next build`), not with every request. Ready pages are served instantly from CDN.

1// Page generated statically during build
2export default function AboutPage() {
3  return (
4    <div>
5      <h1>About Quantum Metropolis</h1>
6      <p>Founded in 2150 as a center for future technologies.</p>
7      <p>Population: 12 million residents.</p>
8    </div>
9  );
10}
11// This page doesn't need dynamic data
12// Next.js will generate it once during 'next build'

When to use SSG?

• Blog, documentation, "About Us" page
• Content that rarely changes
• When maximum loading speed is the priority

CSR - Client-Side Rendering

Personal terminals of Quantum Metropolis residents download raw data and render the interface locally - each terminal creates its own image on its screen.

CSR means the browser downloads JavaScript code and renders the page itself. The server sends empty HTML with an attached JS script.

1"use client";
2
3import { useState, useEffect } from 'react';
4
5export default function LiveChat() {
6  const [messages, setMessages] = useState([]);
7
8  useEffect(() => {
9    // Data fetched in the browser after component loads
10    fetch('/api/messages')
11      .then(res => res.json())
12      .then(data => setMessages(data));
13  }, []);
14
15  return (
16    <div>
17      <h2>Quantum Chat</h2>
18      {messages.map(msg => (
19        <p key={msg.id}>{msg.text}</p>
20      ))}
21    </div>
22  );
23}

When to use CSR?

• Interactive elements (chat, forms, real-time dashboards)
• When SEO isn't needed for a given section
• When the component requires access to browser APIs (localStorage, geolocation)

ISR - Incremental Static Regeneration

In Quantum Metropolis, information boards have an automatic update mode - they're static, but at a set interval (e.g., every hour) the system checks for new data and generates an updated version.

ISR combines the advantages of SSG (speed) with SSR (freshness). The page is generated statically but automatically regenerated after a specified time.

1// Page with ISR - static but regenerated every 60 seconds
2export default async function ProductsPage() {
3  const res = await fetch('https://api.quantum.com/products', {
4    next: { revalidate: 60 } // Regenerate every 60 seconds
5  });
6  const products = await res.json();
7
8  return (
9    <div>
10      <h1>Quantum Store Products</h1>
11      {products.map(p => (
12        <div key={p.id}>
13          <h3>{p.name}</h3>
14          <p>{p.price} credits</p>
15        </div>
16      ))}
17    </div>
18  );
19}

When to use ISR?

• Online store (products change, but not every second)
• Page with articles/news
• When you want SSG speed but with updates

Simple Mental Diagram - Which Strategy to Choose?

Here's a simple decision scheme to help you choose the right strategy:

1Does the content change with every request?
2  YES -> Do you need SEO?
3          YES -> SSR (server rendering)
4          NO  -> CSR (browser rendering)
5  NO  -> Does the content change from time to time?
6          YES -> ISR (static with regeneration)
7          NO  -> SSG (fully static)

| Strategy | Speed | Data Freshness | SEO | Usage Example | |----------|-------|----------------|-----|---------------| | SSG | Fastest | Data from build time | Yes | Blog, documentation | | ISR | Very fast | Refreshed every X seconds | Yes | Store, news | | SSR | Fast | Always current | Yes | Dashboard, profile | | CSR | Depends on client | Fetched live | No | Chat, forms |

What's Next?

In module 5 of this course, we'll dive into the technical details of each rendering strategy. You'll learn:

• How to precisely configure SSR and ISR in App Router
• How to optimize rendering performance
• How to combine different strategies in a single application
• Advanced patterns with React Server Components

For now, the most important thing is to remember that Next.js gives you a choice - you don't have to render everything the same way. Each page, and even each component, can use a different strategy.

Summary

Quantum Metropolis shows us that different information delivery systems have different applications. Similarly in Next.js:

1. SSR - server renders the page with every request (data always current)
2. SSG - page generated once during building (fastest)
3. CSR - browser renders the page after downloading JS (interactivity)
4. ISR - static page with automatic regeneration (compromise between speed and freshness)

Understanding these strategies is the foundation of working with Next.js. In the following modules, you'll apply them in practice, building increasingly advanced applications in Quantum Metropolis.