⚖️ Pages Router vs App Router Comparison

Understanding the evolution from Pages Router to App Router in Next.js

📁 Pages Router (Legacy)

Data Fetching Methods:

getStaticProps

Runs at build time for SSG

getServerSideProps

Runs on each request for SSR

getStaticPaths

Defines dynamic routes for SSG

File Structure:

pages/
  index.tsx         → /
  about.tsx         → /about
  blog/
    index.tsx       → /blog
    [slug].tsx      → /blog/[slug]
  api/
    hello.ts        → /api/hello

🆕 App Router (Current)

Data Fetching Methods:

async components

Direct async/await in components

fetch with cache

Built-in caching strategies

generateStaticParams

Dynamic route generation

server actions

Direct mutations & revalidation

File Structure:

app/
  page.tsx          → /
  about/
    page.tsx        → /about
  blog/
    page.tsx        → /blog
    [slug]/
      page.tsx      → /blog/[slug]
    layout.tsx      → Shared layout
  api/
    hello/
      route.ts      → /api/hello

🔄 Migration Examples

Pages Router (Old Way)

// pages/blog.tsx
export const getStaticProps = async () => {
  const posts = await fetch('/api/posts')
  return {
    props: { posts: await posts.json() },
    revalidate: 60
  }
}

export default function Blog({ posts }) {
  return <div>{/* render posts */}</div>
}

App Router (New Way)

// app/blog/page.tsx
async function getPosts() {
  const res = await fetch('/api/posts', {
    next: { revalidate: 60 }
  })
  return res.json()
}

export default async function Blog() {
  const posts = await getPosts()
  return <div>{/* render posts */}</div>
}

📊 Comparison Table

Feature	Pages Router	App Router
Data Fetching	getStaticProps, getServerSideProps	async/await in components
Layouts	Custom _app.tsx wrapper	Native layout.tsx files
Loading States	Manual implementation	Built-in loading.tsx
Error Handling	Custom _error.tsx	Built-in error.tsx
Server Components	❌ Not available	✅ Default behavior
Streaming	❌ Limited support	✅ Component-level (Suspense)
Data Mutations	API Routes only	✅ Native Server Actions

Try getStaticProps

Pages Router SSG example

Try getServerSideProps

Pages Router SSR example

App Router Examples

Modern Next.js approach