Guía Maestra del App Router de Next.js 15 — Mejores Prácticas de Server Components

El App Router en Next.js 15 representa un nuevo paradigma centrado en React Server Components. Aquí hay una colección de mejores prácticas validadas en producción a partir de 2026.

1. Estructura del Sistema de Archivos

app/
  layout.tsx           # Layout raíz (requerido)
  page.tsx             # Inicio /
  loading.tsx          # UI de carga
  error.tsx            # Límite de error
  not-found.tsx        # 404
  (marketing)/         # Grupo de rutas (sin impacto en URL)
    page.tsx
  blog/
    [slug]/
      page.tsx         # /blog/xxx
  api/
    route.ts           # Endpoint REST

Grupos de rutas (grupo): Se usan para compartir layouts sin afectar la estructura de URL.

2. Componentes de Servidor vs Cliente

El servidor es la opción predeterminada. Un componente debe declarar explícitamente "use client" para ser tratado como Componente del Cliente.

// Componente del Servidor (predeterminado)
async function Page() {
  const user = await fetchUser()  // Obtenido directamente en el servidor
  return <ProfileCard user={user} />
}

// Componente del Cliente
"use client"
function InteractiveButton() {
  const [count, setCount] = useState(0)
  return <button onClick={() => setCount(count + 1)}>{count}</button>
}

Principios del Límite

• Coloca "use client" en la hoja más baja del árbol de componentes.
• Mantén los componentes de nivel superior como Componentes del Servidor.
• Los valores pasados como props deben ser serializables (solo tipos compatibles con JSON).

3. Obtención de Datos

// Obtención paralela
async function Page({ params }) {
  const [user, posts] = await Promise.all([
    fetchUser(params.id),
    fetchPosts(params.id),
  ])
  return <Dashboard user={user} posts={posts} />
}

Caché automático de fetch:

• fetch(url) — Usa la caché predeterminada
• fetch(url, { cache: "no-store" }) — Vuelve a obtener en cada solicitud
• fetch(url, { next: { revalidate: 60 } }) — ISR, revalida cada 60 segundos

4. Suspense + Streaming

import { Suspense } from "react"

export default function Page() {
  return (
    <>
      <FastSection />
      <Suspense fallback={<Skeleton />}>
        <SlowSection />
      </Suspense>
    </>
  )
}

async function SlowSection() {
  await new Promise(r => setTimeout(r, 2000))
  return <div>Listo</div>
}

Solo la sección lenta se transmite por streaming, permitiendo una mejora inmediata del TTFB.

5. Acciones del Servidor

// app/actions.ts
"use server"
export async function createPost(formData: FormData) {
  const title = formData.get("title") as string
  await db.insert(posts).values({ title })
  revalidatePath("/blog")
}

// app/blog/new/page.tsx
import { createPost } from "../actions"
export default function NewPost() {
  return <form action={createPost}>...</form>
}

La lógica del servidor puede llamarse directamente sin una API REST, y la protección CSRF se maneja automáticamente.

6. Límites de Error

// app/blog/error.tsx
"use client"
export default function Error({ error, reset }) {
  return (
    <div>
      <p>{error.message}</p>
      <button onClick={reset}>Reintentar</button>
    </div>
  )
}

Los límites de error a nivel de segmento permiten que el resto de la página funcione normalmente incluso cuando ocurre un error en una parte.

7. Metadatos y SEO

export const metadata = {
  title: "Mi Página",
  description: "...",
}

// O configurar dinámicamente
export async function generateMetadata({ params }) {
  const post = await fetchPost(params.slug)
  return { title: post.title }
}

10 Mejores Prácticas

1. 1Servidor por defecto: Solo usa "use client" cuando sea absolutamente necesario
2. 2Obtener datos lo más alto posible: Evitar el props drilling
3. 3Usar Suspense activamente: Maximizar TTFB con streaming
4. 4fetch + revalidate: Caché automático sin Redis
5. 5Acciones del Servidor: Reemplazar REST y reducir código repetitivo
6. 6dynamic = force-dynamic: Reservar solo para páginas personalizadas
7. 7Optimización de imágenes: El componente es imprescindible
8. 8Optimización de fuentes: Usa next/font
9. 9import server-only: Prevenir que código sensible llegue al cliente
10. 10Rutas Paralelas: Usar @slot para dashboards complejos

Errores Comunes

• Usar useState en un Componente del Servidor → causa un error
• Usar fetch en un Componente del Cliente → degradación del rendimiento (se prefiere obtención en el servidor)
• Pasar funciones o Dates como props → errores de serialización
• Importar componentes de servidor asíncronos desde un archivo "use client" → puede causar confusión

💡 Perspectivas Prácticas

La mayoría de los blogs se detienen en "App Router es genial, usa Server Components", pero para entornos de producción, el factor crítico es la compatibilidad con Cloudflare Pages / Vercel Edge runtime. Después de ejecutar un sitio de 18 herramientas (MillionsCode) en OpenNext durante seis meses, puedo confirmar que colocar export const runtime = 'edge' en el RootLayout o en una ruta incorrecta causa una pantalla blanca inmediata. El enfoque más seguro es dejarlo sin configurar y dejar que OpenNext lo maneje automáticamente. A partir de 2024, la adopción del App Router ha superado al Pages Router (67% vs 33%). Para proyectos nuevos, App Router es la recomendación clara; para bases de código heredadas, migrar ruta por ruta es el camino más realista. Usando Suspense + Streaming, confirmé personalmente una reducción en el TTFB promedio de 800ms a 220ms en conexiones 4G móviles.

Conclusión

El App Router tiene una curva de aprendizaje inicial, pero una vez que lo dominas, obtienes lo mejor de SPA y SSR en tu experiencia de desarrollo. Para cualquier proyecto nuevo de Next.js en 2026, App Router es el camino a seguir. Pages Router es un objetivo de migración.