Next.js 16 use cache y RSC Streaming: TTFB Sub-100ms

La función de Renderizado Parcial Previo (PPR, por sus siglas en inglés), introducida como una característica experimental (experimental.ppr) en la época de Next.js 15, ha evolucionado hacia un paradigma completamente nuevo en Next.js 16. Superando la antigua toma de decisiones dicotómica de “¿es esta página estática o dinámica?”, la directiva "use cache" se ha convertido en el estándar para controlar explícitamente el alcance de la caché estática o dinámica a nivel de componente dentro de una sola página.

Este artículo es una guía completa de la arquitectura de renderizado de Next.js 16 a nivel empresarial, que combina la directiva "use cache" de Next.js 16 con la arquitectura de streaming de React Server Components (RSC) para lograr un TTFB (Time-to-First-Byte) inferior a 100ms, además de configurar un entorno de desarrollo con HMR 10 veces más rápido basado en el empaquetador predeterminado Turbopack.

Resumen clave

• Directiva "use cache": Al declararse en la parte superior de un componente o función, la salida de dicha sección se almacena automáticamente en la caché del servidor/edge durante el tiempo de compilación o el primer renderizado. Las solicitudes posteriores se devuelven instantáneamente desde la caché, reduciendo drásticamente el TTFB a menos de 100ms.
• Streaming de RSC + Huecos con Suspense: El shell HTML estático se envía de inmediato, mientras que las regiones dinámicas (consultas a base de datos, llamadas a API) se transmiten en fragmentos a través de los límites de <Suspense> tan pronto como se completa su renderizado.
• Empaquetador predeterminado Turbopack: Turbopack, basado en Rust, viene integrado por defecto, logrando compilar en producción 5 veces más rápido y mejorar el Fast Refresh en un factor de 10.
• Introducción de proxy.ts: Reemplaza al anterior middleware.ts para separar claramente los límites de la red y admite oficialmente lógica edge como autenticación y redirecciones a nivel de framework.
• Integración con React 19.2: Las API de React más recientes, como View Transitions API, useEffectEvent() y el componente <Activity>, funcionan de manera nativa.

1. PPR (Partial Prerendering) tradicional vs Arquitectura "use cache"

Esta es la diferencia clave entre el modo experimental de PPR en Next.js 14-15 y el estándar de Next.js 16.

[PPR en Next.js 14-15 (Experimental)] ⚠️
next.config.js ──► experimental: { ppr: true } ──► Determinación estática/dinámica por página (Implícita)

[Next.js 16 "use cache" (Estándar)] ⭕️
Componente/Función individual ──► Declaración de directiva "use cache" ──► Control explícito de caché por componente

2. Arquitectura de streaming de RSC: Renderizado dual con shell estático y huecos dinámicos

Flujo de renderizado en streaming según la documentación oficial de Next.js 16.

[Recepción de solicitud HTTP]
        │
        ▼
[Envío inmediato de shell HTML estático] ──► Renderiza el layout en el navegador en menos de 0.5s
        │                                   (Encabezado, navegación, pie de página, etc.)
        │
        ▼
[Streaming paralelo en huecos con Suspense]
   ├── <Suspense fallback={<Skeleton/>}>
   │     └── <ProductRecommendations/> ──► Envío de fragmento tras completar consulta a DB
   │
   └── <Suspense fallback={<Skeleton/>}>
         └── <UserReviews/> ──► Envío de fragmento tras completar respuesta de API

Bajo esta estructura, el usuario puede visualizar la interfaz completa del layout con un TTFB inferior a 100ms, mientras que los datos dinámicos se transmiten e insertan en la pantalla a medida que se completa su renderizado.

3. Código de implementación práctica: "use cache" + RSC + Streaming con Suspense

Definición del componente en caché (app/components/ProductGrid.tsx)

// Al declarar la directiva "use cache", el resultado del renderizado de este
// componente de servidor se almacena automáticamente en la caché edge/servidor
// y se devuelve de inmediato en las siguientes solicitudes.
"use cache";

import { cacheTag } from 'next/cache';

interface Product {
  id: string;
  name: string;
  price: number;
  imageUrl: string;
}

export async function ProductGrid({ category }: { category: string }) {
  // Registro de etiquetas de caché por categoría (para invalidación granular)
  cacheTag(`products-${category}`);

  const products: Product[] = await fetch(
    `https://api.store.com/products?category=${category}`,
  ).then(res => res.json());

  return (
    <section className="grid grid-cols-2 md:grid-cols-4 gap-6">
      {products.map(product => (
        <article key={product.id} className="rounded-2xl border p-4 hover:shadow-lg transition-shadow">
          <img
            src={product.imageUrl}
            alt={product.name}
            className="w-full h-48 object-cover rounded-xl"
          />
          <h3 className="mt-3 font-semibold text-lg">{product.name}</h3>
          <p className="text-brand-primary font-bold">${product.price.toLocaleString()}</p>
        </article>
      ))}
    </section>
  );
}

Composición de la página en streaming (app/shop/[category]/page.tsx)

import { Suspense } from 'react';
import { ProductGrid } from '@/components/ProductGrid';
import { UserReviews } from '@/components/UserReviews';
import { ProductSkeleton, ReviewSkeleton } from '@/components/Skeletons';

// Esta página envía el shell estático de inmediato y llena las áreas dinámicas vía streaming.
export default async function ShopCategoryPage({
  params,
}: {
  params: Promise<{ category: string }>;
}) {
  const { category } = await params;

  return (
    <main className="max-w-7xl mx-auto px-6 py-12">
      <h1 className="text-3xl font-bold mb-8">Colección {category}</h1>

      {/* Cuadrícula de productos en caché: TTFB reducido drásticamente con "use cache" */}
      <Suspense fallback={<ProductSkeleton />}>
        <ProductGrid category={category} />
      </Suspense>

      {/* Reseñas de usuarios: Streaming de datos en tiempo real */}
      <Suspense fallback={<ReviewSkeleton />}>
        <UserReviews category={category} />
      </Suspense>
    </main>
  );
}

Invalidación granular basada en etiquetas de caché (app/api/revalidate/route.ts)

import { revalidateTag } from 'next/cache';
import { NextRequest, NextResponse } from 'next/server';

// Cuando los productos de una categoría específica se actualizan en el CMS,
// se invalida de forma precisa únicamente dicha etiqueta.
export async function POST(request: NextRequest) {
  const { category, secret } = await request.json();

  if (secret !== process.env.REVALIDATION_SECRET) {
    return NextResponse.json({ error: 'Invalid secret' }, { status: 401 });
  }

  // Invalida inmediatamente solo la caché de la categoría correspondiente, no todo el sitio web.
  revalidateTag(`products-${category}`);

  return NextResponse.json({
    revalidated: true,
    tag: `products-${category}`,
    timestamp: Date.now(),
  });
}

4. Benchmark de rendimiento de renderizado en Next.js 16

A continuación se presentan los puntos de referencia clave de Web Vitals medidos en un proyecto de comercio electrónico a escala de 10,000 productos y 500 categorías.

Al igual que las tendencias de empaquetadores basados en Rust analizadas en la Guía de empaquetado de Vite 8 y Rolldown 1.0, Turbopack en Next.js 16 también utiliza un compilador escrito en Rust para elevar drásticamente la productividad del desarrollo.

5. proxy.ts: La capa de red edge que reemplaza a middleware.ts

En Next.js 16, para resolver la complejidad y el alcance de ejecución ambiguo del antiguo middleware.ts, se ha introducido un nuevo archivo de límite de red llamado proxy.ts.

// proxy.ts: Proxy de solicitudes que se ejecuta en la capa de red edge
import type { NextProxy } from 'next/proxy';

export default {
  async proxy(request: NextProxy) {
    const url = new URL(request.url);

    // Si no hay token de autenticación, redirige inmediatamente a la página de inicio de sesión
    const token = request.cookies.get('auth-token');
    if (!token && url.pathname.startsWith('/dashboard')) {
      return Response.redirect(new URL('/login', request.url));
    }

    // Prueba A/B: Enruta el 50% del tráfico a la nueva versión de la UI
    if (url.pathname === '/home' && Math.random() > 0.5) {
      url.pathname = '/home-v2';
      return fetch(url, request);
    }

    // Paso predeterminado: Transfiere la solicitud original al servidor de Next.js
    return fetch(request);
  },
} satisfies NextProxy;

proxy.ts se ejecuta sobre Cloudflare Workers o Vercel Edge Functions, siendo perfectamente compatible con los patrones de proxy de red edge descritos en la Guía de control de costos de LLM con Cloudflare AI Gateway.

6. Lista de verificación para la adopción empresarial

Preguntas frecuentes

¿En qué se diferencia "use cache" de los métodos tradicionales como getStaticProps o ISR?

getStaticProps e ISR solo permitían el control de caché a nivel de página completa y estaban dispersos en las opciones de fetch del App Router. Por el contrario, "use cache" se declara de forma inline en componentes o funciones individuales, lo que permite que dentro de una misma página el componente A se mantenga en caché durante 10 minutos mientras que el componente B se renderiza en tiempo real.

Al cambiar al empaquetador predeterminado Turbopack, ¿seguirán funcionando los plugins de Webpack existentes?

La mayoría de los loaders y plugins estándar de Webpack funcionan a través de la capa de compatibilidad de Turbopack. Sin embargo, los plugins con encadenamientos personalizados complejos requieren migración a la API nativa de Turbopack; puede verificar el estado de compatibilidad de cada plugin en la guía oficial de migración.

¿Es posible desplegar Next.js 16 en Cloudflare Pages?

Sí, es perfectamente posible. A través de la Build Adapters API introducida en Next.js 16.2, la directiva "use cache" y el streaming de RSC funcionan de la misma manera en plataformas de alojamiento distintas de Vercel (como Cloudflare Pages, AWS Amplify, Netlify, entre otras).

¿Cómo se utiliza la API de View Transitions?

La API startViewTransition() de React 19.2 se encuentra integrada en Next.js 16, de modo que las animaciones de transición CSS se aplican automáticamente al cambiar de ruta a través del componente <Link> sin necesidad de bibliotecas adicionales.