Rendimiento: App Router vs. Pages Router en Next.js

Contexto: ¿Qué Estamos Comparando?

El Pages Router es el sistema de enrutamiento tradicional de Next.js, basado en archivos dentro de la carpeta pages/. Es sencillo, directo y lo que la mayoría conocemos.

El App Router llegó con Next.js 13 y se consolidó en la versión 14. Utiliza la carpeta app/, introduce React Server Components por defecto, y promete mejor rendimiento mediante streaming y carga parcial de componentes.

Métricas que Importan

Para esta comparativa nos enfocamos en:

• Time to First Byte (TTFB): Cuánto tarda el servidor en responder.
• First Contentful Paint (FCP): Cuándo aparece el primer contenido en pantalla.
• Largest Contentful Paint (LCP): Cuándo se carga el elemento principal.
• Total Blocking Time (TBT): Tiempo en que el navegador está bloqueado.
• Bundle Size: Tamaño del JavaScript enviado al cliente.

Caso 1: Landing Page Simple

Empecemos con algo básico: una landing page con hero section, features y footer.

// pages/index.js
import Hero from '../components/Hero'
import Features from '../components/Features'
import Footer from '../components/Footer'
 
export default function Home() {
  return (
    <>
      <Hero />
      <Features />
      <Footer />
    </>
  )
}

// app/page.js
import Hero from './components/Hero'
import Features from './components/Features'
import Footer from './components/Footer'
 
export default function Home() {
  return (
    <>
      <Hero />
      <Features />
      <Footer />
    </>
  )
}

Caso 2: Dashboard con Datos Dinámicos

Ahora algo más complejo: un dashboard que consume APIs y muestra datos en tiempo real.

// pages/dashboard.js
export async function getServerSideProps() {
  const [users, stats, activity] = await Promise.all([
    fetch('https://api.example.com/users').then(r => r.json()),
    fetch('https://api.example.com/stats').then(r => r.json()),
    fetch('https://api.example.com/activity').then(r => r.json()),
  ])
 
  return {
    props: { users, stats, activity }
  }
}
 
export default function Dashboard({ users, stats, activity }) {
  return (
    <div>
      <UserList users={users} />
      <StatsPanel stats={stats} />
      <ActivityFeed activity={activity} />
    </div>
  )
}

// app/dashboard/page.js
import { Suspense } from 'react'
import UserList from './components/UserList'
import StatsPanel from './components/StatsPanel'
import ActivityFeed from './components/ActivityFeed'
import { Spinner } from './components/Spinner'
 
async function Users() {
  const users = await fetch('https://api.example.com/users').then(r => r.json())
  return <UserList users={users} />
}
 
async function Stats() {
  const stats = await fetch('https://api.example.com/stats').then(r => r.json())
  return <StatsPanel stats={stats} />
}
 
async function Activity() {
  const activity = await fetch('https://api.example.com/activity').then(r => r.json())
  return <ActivityFeed activity={activity} />
}
 
export default function Dashboard() {
  return (
    <div>
      <Suspense fallback={<Spinner />}>
        <Users />
      </Suspense>
      <Suspense fallback={<Spinner />}>
        <Stats />
      </Suspense>
      <Suspense fallback={<Spinner />}>
        <Activity />
      </Suspense>
    </div>
  )
}

Caso 3: E-commerce con Lista de Productos

Un escenario común: mostrar productos con filtros, ordenamiento y paginación.

// pages/products.js
export async function getStaticProps() {
  const products = await fetch('https://api.store.com/products').then(r => r.json())
  
  return {
    props: { products },
    revalidate: 60 // ISR cada 60 segundos
  }
}
 
export default function Products({ products }) {
  return (
    <div>
      <ProductGrid products={products} />
    </div>
  )
}

// app/products/page.js
async function getProducts() {
  const res = await fetch('https://api.store.com/products', {
    next: { revalidate: 60 }
  })
  return res.json()
}
 
export default async function Products() {
  const products = await getProducts()
  
  return (
    <div>
      <ProductGrid products={products} />
    </div>
  )
}

El Problema Real: Complejidad vs. Beneficio

Aquí viene la parte honesta. App Router es más rápido en la mayoría de casos, pero introduce complejidad:

// App Router requiere entender Server vs Client Components
'use client' // Esto NO existía en Pages Router
 
import { useState } from 'react'
 
export default function Counter() {
  const [count, setCount] = useState(0)
  return <button onClick={() => setCount(count + 1)}>{count}</button>
}

Si olvidas el 'use client', obtienes errores crípticos. En Pages Router todo era Client Component por defecto. Más simple, menos óptimo.

Datos de Producción: Aplicación Real

Migré un proyecto de Pages Router a App Router. 12,000 usuarios mensuales. Estos son los datos de Google Analytics:

Antes (Pages Router):

• Bounce rate: 42%
• Avg. session duration: 2:34
• Pages per session: 3.2

Después (App Router):

• Bounce rate: 36%
• Avg. session duration: 3:01
• Pages per session: 3.8

La página más rápida retiene más usuarios. Simple.

Cuándo Usar Cada Uno

Usa Pages Router si:

• Tu equipo es pequeño y valoras la simplicidad
• No necesitas optimizaciones extremas
• Tienes una aplicación existente funcionando bien

Usa App Router si:

• Construyes algo nuevo desde cero
• El rendimiento es crítico para tu negocio
• Estás dispuesto a invertir tiempo en aprender los nuevos conceptos

Midiendo Tu Propia Aplicación

No confíes solo en mis números. Mide tu caso:

// Agrega esto en cualquier componente
export function reportWebVitals(metric) {
  console.log(metric)
  
  // O envía a tu analytics
  if (metric.label === 'web-vital') {
    gtag('event', metric.name, {
      value: Math.round(metric.value),
      event_label: metric.id,
    })
  }
}

Y usa Lighthouse en DevTools para auditar. Los números no mienten.

Conclusión

App Router es objetivamente más rápido en la mayoría de escenarios, especialmente con datos dinámicos y streaming. Las métricas lo confirman. Pero esa velocidad viene con una curva de aprendizaje pronunciada.

Si estás empezando un proyecto nuevo y el rendimiento importa, App Router es la elección obvia. Si tienes una aplicación funcionando con Pages Router y no hay problemas críticos de velocidad, probablemente no vale la pena migrar todavía.

La performance importa, pero no a costa de la productividad de tu equipo. Evalúa, mide y decide con datos, no con hype.