Next.js App Router: Patrones avanzados de producción

Más allá de los tutoriales básicos

El App Router de Next.js, introducido en la versión 13 y maduro desde la 14 y 15, es un sistema de enrutamiento basado en React Server Components que cambia fundamentalmente cómo construimos aplicaciones web. Después de trabajar con él en proyectos de producción con millones de usuarios, hemos identificado los patrones que marcan la diferencia entre una app que funciona en demo y una que escala en producción.

Patrón 1: Composición de layouts para reducir waterfalls

El error más común que vemos en aplicaciones App Router es el fetch waterfall: componentes anidados que esperan el resultado de una petición para iniciar la siguiente. El antídoto es la composición paralela de datos.

// MAL: waterfall de fetches (lento)
async function PaginaPerfil({ userId }: { userId: string }) {
  const usuario = await fetchUsuario(userId)          // 200ms
  const posts = await fetchPosts(usuario.id)          // 150ms después
  const seguidores = await fetchSeguidores(usuario.id) // 100ms después
  // Total: ~450ms secuencial
}

// BIEN: fetches en paralelo async function PaginaPerfil({ userId }: { userId: string }) { const [usuario, posts, seguidores] = await Promise.all([ fetchUsuario(userId), fetchPosts(userId), fetchSeguidores(userId), ]) // Total: ~200ms (el más lento) } ```

Pero la composición va más allá de Promise.all. Puedes estructurar el árbol de componentes para que diferentes partes de la UI inicien sus fetches de forma independiente, sin esperar al componente padre.

Patrón 2: Streaming con Suspense para perceived performance

El streaming permite que el servidor envíe el HTML de la página progresivamente, mostrando partes de la UI mientras otras siguen cargando:

// app/dashboard/page.tsx
import { Suspense } from 'react'
import { MetricasSkeleton, FeedSkeleton } from '@/components/skeletons'

export default function Dashboard() { return ( <div className="grid grid-cols-2 gap-4"> {/* Este componente se renderiza inmediatamente (estático) */} <Bienvenida /> {/* Este hace fetch pesado pero no bloquea el resto */} <Suspense fallback={<MetricasSkeleton />}> <MetricasPanel /> {/* Server Component con fetch */} </Suspense> <Suspense fallback={<FeedSkeleton />}> <FeedActividad /> {/* Otro fetch independiente */} </Suspense> </div> ) } ```

Con este patrón, el usuario ve la página con skeletons inmediatamente y los datos van apareciendo a medida que llegan del servidor. La percepción de velocidad mejora drásticamente aunque el tiempo total de carga sea similar.

Patrón 3: Estrategias de caché avanzadas

Next.js 15 introduce un control de caché más granular con las nuevas APIs `cacheTag` y `revalidateTag`:

import { unstable_cache, revalidateTag } from 'next/cache'

// Server Component que cachea datos del usuario con tags const fetchUsuarioCacheado = unstable_cache( async (userId: string) => { const usuario = await db.usuario.findUnique({ where: { id: userId } }) return usuario }, ['usuario'], { tags: ['usuario', `usuario-${userId}`], revalidate: 3600, // 1 hora como máximo } )

// Server Action que invalida el caché de forma quirúrgica async function actualizarPerfil(formData: FormData) { 'use server' const userId = formData.get('userId') as string await db.usuario.update({ where: { id: userId }, data: { nombre: formData.get('nombre') as string } }) // Solo invalida el caché de este usuario específico revalidateTag(`usuario-${userId}`) } ```

Patrón 4: Server Actions para formularios robustos

Las Server Actions son funciones asíncronas que se ejecutan en el servidor y pueden ser invocadas directamente desde componentes cliente. El patrón más sólido para formularios en producción:

// actions/crear-post.ts
'use server'

import { z } from 'zod' import { redirect } from 'next/navigation' import { revalidatePath } from 'next/cache'

const esquemaPost = z.object({ titulo: z.string().min(5).max(200), contenido: z.string().min(50), slug: z.string().regex(/^[a-z0-9-]+$/), })

export async function crearPost( estadoPrevio: { error?: string }, formData: FormData ) { // Validación del esquema const validacion = esquemaPost.safeParse({ titulo: formData.get('titulo'), contenido: formData.get('contenido'), slug: formData.get('slug'), }) if (!validacion.success) { return { error: validacion.error.issues[0].message } } await db.post.create({ data: validacion.data }) revalidatePath('/blog') redirect(`/blog/${validacion.data.slug}`) } ```

// components/formulario-post.tsx
'use client'

import { useActionState } from 'react' import { crearPost } from '@/actions/crear-post'

export function FormularioPost() { const [estado, accion, isPending] = useActionState(crearPost, {}) return ( <form action={accion}> {estado.error && <p className="text-red-500">{estado.error}</p>} <input name="titulo" required /> <textarea name="contenido" required /> <input name="slug" required /> <button type="submit" disabled={isPending}> {isPending ? 'Guardando...' : 'Publicar'} </button> </form> ) } ```

Patrón 5: Optimistic Updates con useOptimistic

Para una UX instantánea en operaciones mutativas:

'use client'

import { useOptimistic, useTransition } from 'react' import { toggleLike } from '@/actions'

function BotonLike({ postId, likesInicial }: Props) { const [likes, setLikesOptimista] = useOptimistic(likesInicial) const [, startTransition] = useTransition() return ( <button onClick={() => { startTransition(async () => { // Actualización inmediata en UI setLikesOptimista(likes + 1) // Llamada real al servidor await toggleLike(postId) }) }}> ❤️ {likes} </button> ) } ```

Patrón 6: Parallel Routes para layouts complejos

Las Parallel Routes permiten renderizar múltiples páginas en el mismo layout simultáneamente, ideal para dashboards con paneles independientes:

app/dashboard/
  layout.tsx
  page.tsx
  @metricas/
    page.tsx
  @feed/
    page.tsx
    loading.tsx  ← Skeleton independiente por slot

// app/dashboard/layout.tsx
export default function DashboardLayout({
  children,
  metricas,
  feed,
}: {
  children: React.ReactNode
  metricas: React.ReactNode
  feed: React.ReactNode
}) {
  return (
    <div className="dashboard-grid">
      {children}
      {metricas}
      {feed}
    </div>
  )
}

Cada slot tiene su propio estado de carga, error boundary y navegación. Si el fetch de métricas falla, no afecta al feed.

Patrón 7: Middleware para autenticación y enrutamiento

El middleware de Next.js corre en el Edge antes de que la request llegue a la aplicación, ideal para autenticación sin servidor de origen:

// middleware.ts
import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'
import { verifyJWT } from '@/lib/auth'

export async function middleware(request: NextRequest) { const token = request.cookies.get('auth-token')?.value const ruta = request.nextUrl.pathname const esRutaProtegida = ruta.startsWith('/dashboard') || ruta.startsWith('/admin') if (esRutaProtegida && !token) { return NextResponse.redirect(new URL('/login', request.url)) } if (token) { const payload = await verifyJWT(token) if (!payload) { const respuesta = NextResponse.redirect(new URL('/login', request.url)) respuesta.cookies.delete('auth-token') return respuesta } // Pasar info del usuario a headers para los Server Components const requestHeaders = new Headers(request.headers) requestHeaders.set('x-user-id', payload.sub) requestHeaders.set('x-user-role', payload.role) return NextResponse.next({ request: { headers: requestHeaders } }) } return NextResponse.next() }

export const config = { matcher: ['/dashboard/:path*', '/admin/:path*', '/api/:path*'], } ```

Estos siete patrones constituyen el núcleo de las aplicaciones Next.js de producción de alto rendimiento. La diferencia entre una app que funciona y una que escala está en estos detalles arquitectónicos.