Next.js 15: La Revolución del App Router y PPR

Descubre las nuevas características de Next.js 15: Partial Prerendering (PPR), Server Components mejorados, y optimizaciones de performance.

Carlos Ruiz

Full Stack Developer experto en Next.js y arquitectura serverless

11 de noviembre de 2025

15 min

Next.js 15: La Revolución del App Router

Next.js 15 introduce Partial Prerendering (PPR), una característica revolucionaria que combina lo mejor de la generación estática con la flexibilidad dinámica.

En este artículo exploraremos PPR, Server Components mejorados, y las optimizaciones de performance que hacen de Next.js 15 el framework más rápido.

¿Qué es Partial Prerendering (PPR)?

PPR permite combinar contenido estático (prerenderizado) con contenido dinámico (generado al vuelo) en la misma página. Esto significa performance excepcional sin sacrificar personalización.

Arquitectura PPR de Next.js 15 — PPR combina static y dynamic en una sola página

Configuración de PPR

Habilitar PPR es tan simple como añadir una línea en tu configuración:

typescript

next.config.ts

1const nextConfig = {
2  experimental: {
3    ppr: true,  // ✅ Habilitar PPR
4  },
5};
6
7export default nextConfig;

Recomendado: Habilita PPR para obtener performance cercana a sitios 100% estáticos con la flexibilidad de contenido dinámico.

Server Components por Defecto

En Next.js 15, todos los componentes son Server Components por defecto. Esto reduce dramáticamente el bundle JavaScript enviado al cliente.

typescript

page.tsx

1// ✅ Server Component (por defecto)
2export default async function Page() {
3  const data = await fetch('https://api.example.com/data');
4  const json = await data.json();
5  
6  return (
7    <div>
8      <h1>Datos del servidor</h1>
9      <ul>
10        {json.map(item => <li key={item.id}>{item.name}</li>)}
11      </ul>
12    </div>
13  );
14}

Para componentes interactivos, usa 'use client' en la primera línea:

typescript

counter.tsx

1'use client';
2
3import { useState } from 'react';
4
5export function Counter() {
6  const [count, setCount] = useState(0);
7  return <button onClick={() => setCount(count + 1)}>{count}</button>;
8}

Streaming y Suspense

Next.js 15 mejora el streaming con React Suspense, permitiendo mostrar contenido progresivamente mientras se cargan datos.

typescript

page.tsx

1import { Suspense } from 'react';
2import { UserList } from './user-list';
3
4export default function Page() {
5  return (
6    <div>
7      <h1>Usuarios</h1>
8      <Suspense fallback={<p>Cargando usuarios...</p>}>
9        <UserList />
10      </Suspense>
11    </div>
12  );
13}

Performance: Comparación

Veamos los números reales de performance entre Next.js 14 y Next.js 15 con PPR:

Next.js 14 vs 15 - Performance Metrics

Métrica	Next.js 14	Next.js 15 + PPR	Mejora
TTFB (Time to First Byte)	250ms	120ms	52% más rápido
LCP (Largest Contentful Paint)	1.8s	0.9s	50% más rápido
Bundle Size (JS)	142 KB	89 KB	37% menor
Lighthouse Score	87	98	+11 puntos

Impresionante: Next.js 15 con PPR logra Lighthouse scores >95 de forma consistente.

Cache API Mejorado

La nueva Cache API simplifica el caching con use cache directive:

typescript

lib/data.ts

1'use cache';
2
3export async function getProducts() {
4  const res = await fetch('https://api.example.com/products', {
5    next: { revalidate: 3600 }  // Cache 1 hora
6  });
7  return res.json();
8}

Conclusión

Next.js 15 es un salto gigante en performance y developer experience.

Con PPR, Server Components mejorados, y optimizaciones automáticas, es el momento perfecto para migrar tus proyectos. ¡El futuro del web development está aquí! 🚀