What is the difference between SSR, SSG, and ISR?

SSR renders pages per request, SSG builds them at build time, and ISR rebuilds static pages on a schedule to keep them fresh.

What are server components in Next.js?

Server components render on the server by default, reducing JavaScript sent to the browser and improving performance and SEO.

Intermediate🖼️ 20 slides⏱ 4 minFrontend Frameworks

▲ Next.js Explained

Next.js is a React framework for building fast, SEO-friendly web apps with server-side rendering and static generation. This visual guide covers the App Router, server vs client components, SSR, SSG, ISR, routing, and data fetching.

Slide 1 / 20

What Is Next.js?

Next.js is a React framework for fast, SEO-friendly full-stack web apps.

Slide 2 / 20

Why Use Next.js?

It adds routing, rendering, and backend features on top of React.

Slide 3 / 20

React vs Next.js

React is a UI library; Next.js is a full framework around it.

Slide 4 / 20

The App Router

File-based routing where folders become routes.

Slide 5 / 20

Pages and Layouts

Layouts wrap pages with shared UI.

Slide 6 / 20

Server Components

Render on the server by default for speed and SEO.

Slide 7 / 20

Client Components

Add "use client" for interactivity and browser APIs.

Slide 8 / 20

What Is SSR?

Server-Side Rendering builds the page per request.

Slide 9 / 20

What Is SSG?

Static Site Generation builds pages at build time.

Slide 10 / 20

What Is ISR?

Incremental Static Regeneration updates static pages on a schedule.

Slide 11 / 20

Choosing a Rendering Mode

Pick SSG, SSR, or ISR based on how fresh data must be.

Slide 12 / 20

Data Fetching

Fetch data in server components or with caching options.

Slide 13 / 20

Dynamic Routes

[slug] folders create pages from data.

Slide 14 / 20

generateStaticParams

Pre-build dynamic pages at build time.

Slide 15 / 20

Metadata and SEO

Built-in metadata API powers titles, OG, and canonical tags.

Slide 16 / 20

Image Optimization

next/image serves optimized, lazy-loaded images.

Slide 17 / 20

API Routes

Build backend endpoints inside your Next.js app.

Slide 18 / 20

Middleware

Run code before requests for auth and redirects.

Slide 19 / 20

Deployment

Next.js deploys easily to Vercel and other hosts.

Slide 20 / 20

Why Next.js Wins SEO

Server rendering gives crawlable HTML out of the box.

Frequently Asked Questions

Next.js is a React framework that adds routing, server-side rendering, static generation, and backend features for building fast, SEO-friendly web apps.