Next.js App Router: SSR, Routing and Data

Why Next.js After React

SEO, first-load speed, API routes and image optimisation out of the box. Most React jobs are actually Next.js jobs now.

Setup and Structure

npx create-next-app@latest shop --typescript --tailwind --app
app/
  page.js            # route /
  books/page.js      # route /books
  books/[id]/page.js # route /books/42
  layout.js          # shared shell

Server vs Client Components

// app/books/page.js - server component (default):
export default async function Books() {
  const res = await fetch("https://api.../books", { next: { revalidate: 60 } })
  const books = await res.json()
  return books.map(b => <BookCard key={b.id} {...b} />)
}
// interactive bits get "use client" at the top

Rendering Modes in One Minute

• SSG - pre-built HTML, fastest, blogs/docs.
• SSR - fresh HTML per request, dashboards.
• ISR - static plus revalidate timer, best of both.

Key Points

• App Router: folders are routes, files are UI.
• Fetch on the server, interact on the client.
• Start with SSG/ISR; reach for SSR only with reason.