Patrones prácticos para el App Router de Next.js

Por qué el App Router cambia todo

Con el Pages Router, cada página era un árbol completo de React del lado del cliente. El App Router invierte esto: todo es un Server Component por defecto, y solo pasás al cliente donde necesitás interactividad.

Esto importa por tres razones concretas: bundles de JS más pequeños (el código del servidor nunca se envía), acceso inmediato a datos asíncronos sin cascadas de useEffect, y co-ubicación de la lógica de layout con los componentes que la necesitan.

Server Components en la práctica

El modelo mental clave: un Server Component es simplemente una función async. Podés await una query de base de datos o un fetch de CMS directamente dentro del componente — sin getServerSideProps, sin API route wrapper.

// app/dashboard/page.tsx
export default async function DashboardPage() {
  const metrics = await db.query('SELECT * FROM metrics');
  return <MetricsGrid data={metrics} />;
}

El fetching de datos está co-ubicado, el árbol de componentes es más liviano, y el bundle del cliente se mantiene pequeño porque MetricsGrid y sus dependencias nunca llegan al navegador.

Layouts anidados y la jerarquía de loading

Los layouts anidados son una de las funcionalidades más poderosas del App Router. Cada segmento de la URL puede tener su propio layout.tsx, y React los renderiza como un árbol anidado — así que navegar entre páginas hermanas no vuelve a montar la UI del layout compartido.

• Usá layout.tsx para la UI de shell persistente (sidebars, tabs)
• Usá loading.tsx para skeletons de suspense por segmento
• Usá error.tsx para error boundaries por segmento
• Usá template.tsx cuando necesitás un montaje fresco en cada navegación

Rutas paralelas para UIs complejas

Las rutas paralelas te permiten renderizar múltiples slots de página de forma simultánea e independiente. Son perfectas para dashboards donde una barra lateral, un panel principal y un feed de notificaciones tienen sus propios estados de carga y error.

Tratá las rutas paralelas como árboles async independientes. Cada uno puede cargar, fallar y suspenderse sin afectar a los demás — que es exactamente lo que necesita un dashboard.