SSR and Next.js Intro

Introduction

A standard Vite + React SPA ships one index.html and renders entirely in the browser. Server-side rendering (SSR) generates HTML on the server per request—better for SEO, social previews, and first paint. Next.js is the dominant React meta-framework for SSR, SSG, and full-stack features. This is a thin overview—full Next.js tutorials live in Next.js documentation.

Prerequisites

Build, Preview, and Deploy
React Router Basics
Completed SPA chapters 01–17

CSR vs SSR vs SSG

Mode	Where HTML is built	First request
CSR (Vite SPA)	Browser	Shell → JS → render
SSR	Server per request	HTML with content
SSG	Build time	Static HTML files

Hello Code React track teaches CSR with Vite—simplest path to learn React and pair with FastAPI APIs.

Compare Vue Nuxt intro.

When You Need SSR

Need	Consider
Public marketing, SEO keywords	SSR or SSG
Open Graph / social previews	SSR/SSG with meta tags
Authenticated admin dashboard	CSR SPA is often enough
Public blog crawled by Google	SSR, SSG, or pre-render

Many teams ship CSR admin + SSG marketing as separate apps.

What Next.js Adds

Feature	Vite SPA + React Router	Next.js App Router
Routing	Manual route config	File-based `app/`
Data fetching	`useEffect` + fetch	Server Components, `fetch` on server
SSR	Manual setup	Built-in
API routes	Separate backend	Optional `app/api/` route handlers
Meta / SEO	`react-helmet` or manual	`metadata` export

Next.js Project Sketch

bash

npx create-next-app@latest hello-next --typescript --app --eslint
cd hello-next
npm run dev

text

hello-next/
├── app/
│   ├── layout.tsx
│   ├── page.tsx              → /
│   ├── posts/
│   │   └── [slug]/
│   │       └── page.tsx      → /posts/:slug
│   └── api/
│       └── health/
│           └── route.ts      → GET /api/health
└── next.config.ts

app/posts/[slug]/page.tsx (simplified):

tsx

Code explanation:

Async Server Component fetches on the server—no useEffect for initial data
params.slug comes from the URL segment

Client Components in Next.js

Interactive UI (hooks, events) needs "use client" at top of file:

tsx

"use client";
 
import { useState } from "react";
 
export function LikeButton() {
  const [likes, setLikes] = useState(0);
  return (
    <button type="button" onClick={() => setLikes((n) => n + 1)}>
      {likes} likes
    </button>
  );
}

Import client components into server pages as children.

Deploy Next.js

Vercel — zero-config for Next
Node server — npm run build && npm start
Docker — standalone output in next.config

SPA dist/ deploy from this track does not apply to Next without adaptation.

Staying on Vite SPA

Valid choices:

Admin tools behind login (CSR)
SEO via pre-render plugin (vite-plugin-ssr ecosystem) — advanced
Separate Next marketing site + Vite admin

FAQ

Learn Next before React?

Learn React + Router + fetch first (this track), then Next.

React Server Components?

Next App Router default—components are server unless "use client".

Replace FastAPI with Next API routes?

Possible for small apps; Hello Code keeps API in Python tracks for full-stack practice.

Hydration mismatch?

Server HTML must match client render—avoid Date.now() in server output without sync.

Next chapter?

Performance and Best Practices.