¿Cuál es la diferencia entre App Router y Pages Router?

Question

Accepted Answer

Next.js tiene **dos sistemas de enrutamiento**. El **Pages Router** (`pages/`) es el original; el **App Router** (`app/`, desde Next 13) es el más nuevo y recomendado, construido alrededor de React Server Components. ## Diferencias en archivos y convenciones ```text Pages Router (pages/) App Router (app/) ────────────────────────────────────────────────────── pages/about.tsx → /about app/about/page.tsx → /about Default export = page page.tsx = page, layout.tsx = layout getServerSideProps (SSR) async Server Components (fetch directly) getStaticProps (SSG) fetch() with caching options _app.tsx / _document.tsx Nested layout.tsx files All components client-rendered Server Components by default ``` ## El cambio conceptual clave: Server Components ```tsx // App Router — a Server Component that fetches data directly, no extra API // app/users/page.tsx export default async function Users() { const res = await fetch("https://api.example.com/users"); // runs on the SERVER const users = await res.json(); return

{u.name}

; } ``` En el App Router, los componentes son **Server Components por defecto** — se ejecutan en el servidor, pueden esperar datos directamente (`await`), y envían cero JS para ese componente al navegador. En cambio, el Pages Router usaba funciones especiales (`getServerSideProps`) para pasar datos a páginas renderizadas en el cliente. ## Lo que añade el App Router - **Layouts anidados** (`layout.tsx`) que persisten durante la navegación. - **Server Components** (menos JS en el cliente, acceso directo a datos). - **Streaming** con `loading.tsx` / Suspense. - **Server Actions** para mutaciones sin rutas API. ## Cuál usar Usa el **App Router** para proyectos nuevos — es donde se enfoca el desarrollo de Next.js. El Pages Router sigue siendo compatible (y ambos pueden coexistir en una misma aplicación), pero está esencialmente en modo mantenimiento. ## Por qué es importante El App Router representa la arquitectura actual de Next.js (Server Components, layouts anidados, streaming). Saber cómo difiere del antiguo Pages Router — especialmente el valor predeterminado orientado al servidor y el modelo de layouts — es esencial para trabajar en cualquier codebase moderno de Next.js.