When will you use this?

Use Route Handlers when a mobile app, webhook, or external client needs JSON from your server.

• Mobile apps and partner sites call your Next.js Route Handlers for JSON over HTTP.
• Webhook endpoints for payment providers live in app/api routes.

Real-world: LearnHub LMS

The EdTech / LMS team building LearnHub LMS uses SSR vs SSG vs ISR to apply SSR vs SSG vs ISR when building course catalog, lesson player, and progress tracking. students and instructors never see the TypeScript files — they just get a fast, reliable course catalog, lesson player, and progress tracking.

Production-style code

// SSG — static at build
export default async function AboutPage() {
  return <h1>About LearnHub</h1>;
}

// ISR — revalidate every 60 seconds
async function getCourses() {
  const res = await fetch('https://api.example.com/courses', {
    next: { revalidate: 60 }
  });
  return res.json();
}

export default async function CatalogPage() {
  const courses = await getCourses();
  return <CourseGrid courses={courses} />;
}

What happens in production: In LearnHub LMS, getting SSR vs SSG vs ISR right means students and instructors trust the course catalog, lesson player, and progress tracking every day.

Lesson example (start here)

Copy this smaller example first. Once it works, compare it with the real-world code above.

// SSG — static at build
export default async function AboutPage() {
  return <h1>About LearnHub</h1>;
}

// ISR — revalidate every 60 seconds
async function getCourses() {
  const res = await fetch('https://api.example.com/courses', {
    next: { revalidate: 60 }
  });
  return res.json();
}

export default async function CatalogPage() {
  const courses = await getCourses();
  return <CourseGrid courses={courses} />;
}

Line-by-line walkthrough

How it works (big picture)

• Marketing pages with no personal data are perfect for SSG.
• Catalog pages that change hourly use ISR.
• Personalized dashboards often need SSR or client fetch after auth.

Do this on your computer

1. Add next: { revalidate: 60 } to a fetch in the catalog page.
2. Run npm run build and npm start — note static vs dynamic in the build output.
3. Change revalidate to 0 and compare behavior (SSR).
4. Read the real-world section and name which part of LearnHub uses this topic.
5. Run the example locally with npm run dev and confirm the same behavior.
6. Change one value in the example (route, text, or course id) and predict what will happen before you save.

Experiments — try changing this

• Change a string or route in the example and save — watch the browser update.
• Break the code on purpose (remove a bracket), read the error overlay, then fix it.
• Change the API URL or course id and see how the page data changes.
• Use npm run dev while editing SSR vs SSG vs ISR — the page hot-reloads on save.

Remember

SSG = fastest, fixed content. ISR = static + periodic refresh. SSR = fresh HTML every request.

Common questions