Changyi's Blog

Next.js Notes

Next.js Notes

Introduction to Next.js

Next.js, a powerful React framework that enables both server-side rendering (SSR) and static site generation (SSG). Coming from a pure React background, I was amazed by how efficiently Next.js handles routing, data fetching, and SEO optimization — all out of the box.

Why Chose Next.js

Unlike traditional React apps that rely on client-side rendering, Next.js pre-renders pages by default. This not only improves performance but also makes web pages more visible to search engines.

  • File-based routing — simply drop a component into /pages and it becomes a route.
  • API routes — building backend endpoints without leaving the framework.
  • Incremental Static Regeneration (ISR) — update static pages after deployment without rebuilding the entire site.

CSR vs. SSR vs. SSG — Understanding the Core Rendering Strategies in React and Next.js

While learning React and Next.js, one of the most eye-opening topics for me was understanding the different rendering strategies.
They directly affect performance, SEO, and user experience — especially how fast the user sees meaningful content.

Client-Side Rendering (CSR)

The traditional rendering method used by plain React apps.

How it works:

  1. The browser requests an HTML page.
    → The server returns an almost empty HTML shell (no actual data).
  2. The browser downloads the React JavaScript bundle.
  3. JavaScript executes and triggers a fetch() call to get data.
  4. Once the data arrives, React renders the page on the client.

Characteristics:

  • The first paint is delayed because the page depends on JS execution and data fetching.
  • Users might see a blank screen until everything loads.
  • Works best for highly interactive single-page apps where SEO isn’t a priority.

Server-Side Rendering (SSR)

The core feature that makes Next.js powerful — pre-rendering on the server.

How it works:

  1. The browser requests a page.
  2. The server executes the React components (including any fetch() calls).
  3. The server generates a fully rendered HTML page with data included.
  4. The browser receives this complete HTML and immediately displays it.
  5. Meanwhile, React scripts load in the background and perform hydration —
    the process that turns static HTML into an interactive React app.

What is Hydration?
Hydration is the process of “binding” the server-rendered static HTML with React’s client-side logic.
Before hydration, the page is static. After hydration, it becomes interactive — buttons work, inputs respond, etc.

Advantages:

  • Faster first contentful paint (FCP) — users instantly see meaningful content.
  • SEO-friendly — search engine crawlers can read the page content directly,
    unlike CSR where the crawler only sees an empty HTML shell.

Static Site Generation (SSG)

Another form of pre-rendering offered by Next.js.

  • During the build process, Next.js executes the React components and generates static HTML files.
  • When users visit the site, the server simply returns the pre-generated HTML without running React again.
  • Ideal for blogs, documentation, and other content that doesn’t change frequently.
Next →