App Router vs Pages Router: A Comprehensive Comparison

Introduction

The introduction of the App Router in Next.js 13 created one of the biggest architectural shifts in the React ecosystem. Developers now face a genuine choice between two fundamentally different routing paradigms. This is not a simple upgrade path: the App Router is not universally better than Pages Router, and understanding when to use each is critical.

After building production applications with both routers, I have developed a clear framework for making this decision. This post provides an honest, code-level comparison.

Environment

• OS: Windows 11
• Node.js: v20.10.0
• Next.js: 14.0.4
• React: 18.2.0

Problem

The core differences create real-world tradeoffs:

Pages Router:
- Simple mental model (one file = one page)
- Well-documented patterns
- Mature ecosystem of tutorials and libraries
- No Server Components
- Data fetching only at page level (getServerSideProps)

App Router:
- Complex mental model (layouts, slots, server/client split)
- New patterns with limited documentation
- Server Components reduce JavaScript bundle
- Data fetching at any component level
- Server Actions for mutations
- Streaming and Suspense boundaries

Analysis

Performance comparison:

Metric                    | Pages Router    | App Router
--------------------------|-----------------|------------------
Initial JS bundle         | Larger          | Smaller (RSC)
Time to Interactive       | Slower          | Faster
First Contentful Paint    | Similar         | Faster (streaming)
Server response time      | Similar         | Similar
Memory usage (server)     | Lower           | Higher
Build time                | Faster          | Slower

Developer experience:

Feature                   | Pages Router    | App Router
--------------------------|-----------------|------------------
Learning curve            | Easier          | Steeper
Code colocation           | Moderate        | Excellent
Loading states            | N/A             | Built-in (loading.tsx)
Error handling            | Error pages     | Error boundaries
CSS Modules               | Full support    | Full support
Metadata API              | Head component  | generateMetadata

Solution

When to use Pages Router:

// pages/index.tsx
// Good for: Simple blogs, landing pages, MVPs
import { GetServerSideProps } from 'next'

interface HomeProps {
  posts: Array<{ id: string; title: string }>
}

export default function Home({ posts }: HomeProps) {
  return (
    

      {posts.map((post) => (
        

          
{post.title}
        
      ))}
    
  )
}

export const getServerSideProps: GetServerSideProps = async () => {
  const posts = await fetchPosts()
  return { props: { posts } }
}

When to use App Router:

// app/dashboard/page.tsx
// Good for: Dashboards, complex UIs, real-time apps
import { Suspense } from 'react'
import { AnalyticsCard } from './AnalyticsCard'
import { RecentActivity } from './RecentActivity'
import { UserMenu } from './UserMenu'

export default async function Dashboard() {
  return (
    

      
      

        }>
          
        
        }>
          
        
      
    
  )
}

Migration checklist:

1. Create app/ directory alongside pages/
2. Move pages to app/ with layout.tsx files
3. Convert getServerSideProps to async Server Components
4. Convert getStaticProps to async Server Components with revalidate
5. Mark interactive components with "use client"
6. Convert API routes from pages/api to app/api
7. Update data fetching to use fetch() or server-side libraries
8. Add loading.tsx and error.tsx files
9. Test every route
10. Remove pages/ directory

Lessons Learned

1. Start new projects with App Router. There is no reason to start a greenfield project with Pages Router in 2024.

2. Do not migrate working Pages Router applications unless you have specific reasons. Pages Router is still supported and will receive security updates.

3. Use the App Router for its streaming capabilities. Server Components with Suspense boundaries provide a superior loading experience.

4. Server Components reduce client JavaScript. If your page renders mostly static content, the App Router will deliver significantly smaller bundles.

5. Both routers can coexist. You can migrate incrementally by adding an app directory alongside your existing pages directory.

This blog does not accept any external sponsorships, affiliate marketing, or ad revenue.