Descubre cómo optimizar tu aplicación Next.js con SSR y SSG. Guía paso a paso con código, ejemplos prácticos y técnicas avanzadas para reducir tiempos de carga hasta 60%. Actualizado 2026.
Jesús Blanco
Autor
¿Tu aplicación Next.js carga lento? ¿Quieres mejorar el rendimiento sin sacrificar funcionalidad? En esta guía te mostraré las técnicas más efectivas para optimizar aplicaciones Next.js, reducir tiempos de carga hasta un 60% y mejorar la experiencia de usuario.
Ya sea que uses Server-Side Rendering (SSR), Static Site Generation (SSG) o Incremental Static Regeneration (ISR), aquí encontrarás las mejores prácticas respaldadas por la documentación oficial de Next.js y casos de éxito reales.
Según estudios de Google, el 53% de los usuarios abandonan un sitio si tarda más de 3 segundos en cargar. Con Next.js puedes lograr tiempos de carga por debajo de 1 segundo si implementas las optimizaciones correctas.
Beneficios clave de optimizar Next.js:
El componente Image de Next.js es tu mejor aliado, pero muchos desarrolladores no aprovechan todas sus capacidades.
import Image from 'next/image'
function ProductCard() {
return (
<Image
src="/products/laptop.jpg"
alt="Laptop ultraligera para desarrollo 2026"
width={800}
height={600}
priority // Para imágenes above-the-fold
quality={85} // Balance entre calidad y peso
placeholder="blur" // Mejora perceived performance
blurDataURL="data:image/jpeg;base64,/9j/4AAQSkZJRg..." // Genera con sharp
/>
)
}
1. Lazy loading inteligente con IntersectionObserver:
import Image from 'next/image'
function Gallery({ images }) {
return (
{images.map((img, index) => (
<Image
key={img.id}
src={img.url}
alt={img.description}
width={400}
height={300}
loading={index < 6 ? "eager" : "lazy"} // Primeras 6 eager, resto lazy
sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
/>
))}
)
}
2. Optimización con CDN y formato WebP/AVIF:
// next.config.js
module.exports = {
images: {
domains: ['cdn.fencode.dev', 'images.unsplash.com'],
formats: ['image/avif', 'image/webp'], // AVIF primero (mejor compresión)
deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
minimumCacheTTL: 60,
},
}
3. Reducir CLS (Cumulative Layout Shift):
// Siempre especifica dimensiones para evitar layout shifts
<Image
src="/hero.jpg"
alt="Hero image"
width={1920}
height={1080}
style={{ width: '100%', height: 'auto' }} // Responsive pero sin CLS
/>
Resultado esperado: Reducción del peso de imágenes de 2.5MB a 350KB, mejora de LCP de 4.2s a 1.3s.
El code splitting mal implementado puede empeorar el rendimiento. Aquí está cómo hacerlo bien.
import dynamic from 'next/dynamic'
import { Suspense } from 'react'
// Componente pesado que solo se usa en ciertas condiciones
const AdvancedChart = dynamic(() => import('@/components/AdvancedChart'), {
loading: () => (
Cargando gráfico...
),
ssr: false, // Si no necesitas SSR para este componente
})
// Modal que solo se carga cuando el usuario lo activa
const UserProfileModal = dynamic(() => import('@/components/UserProfileModal'), {
loading: () => Cargando perfil...,
})
function Dashboard() {
const [showModal, setShowModal] = useState(false)
return (
Dashboard
{/* Chart solo se descarga cuando es visible */}
{/* Modal solo se descarga cuando showModal es true */}
{showModal && <UserProfileModal onClose={() => setShowModal(false)} />}
)
}
import Link from 'next/link'
function Navigation() {
return (
{/* Prefetch automático para páginas críticas */}
Servicios
{/* Sin prefetch para páginas raramente visitadas */}
Términos
{/* Prefetch manual con IntersectionObserver */}
<Link
href="/blog"
onMouseEnter={() => router.prefetch('/blog')}
>
Blog
)
}
// ❌ MALO: Importa toda la librería (500KB)
import _ from 'lodash'
const result = _.debounce(fn, 300)
// ✅ BUENO: Solo importa lo necesario (10KB)
import debounce from 'lodash/debounce'
const result = debounce(fn, 300)
// ✅ MEJOR: Usa alternativas nativas cuando sea posible
const debounce = (fn, delay) => {
let timeoutId
return (...args) => {
clearTimeout(timeoutId)
timeoutId = setTimeout(() => fn(...args), delay)
}
}
Resultado esperado: Reducción del bundle inicial de 350KB a 120KB, mejora de FCP (First Contentful Paint) de 2.1s a 0.8s.
Esta es probablemente la decisión más importante para el rendimiento de tu aplicación Next.js.
Ideal para:
// pages/blog/[slug].js
export async function getStaticProps({ params }) {
const post = await fetchPost(params.slug)
return {
props: { post },
revalidate: 3600, // ISR: regenera cada hora
}
}
export async function getStaticPaths() {
const posts = await fetchAllPosts()
return {
paths: posts.map(post => ({ params: { slug: post.slug } })),
fallback: 'blocking', // Genera páginas bajo demanda
}
}
export default function BlogPost({ post }) {
return
}
Ventajas:
Ideal para:
// pages/dashboard.js
export async function getServerSideProps(context) {
const { req, res } = context
// Cache en el edge para optimizar
res.setHeader(
'Cache-Control',
'public, s-maxage=10, stale-while-revalidate=59'
)
const session = await getSession(req)
const userData = await fetchUserData(session.userId)
return {
props: { userData }
}
}
export default function Dashboard({ userData }) {
return
}
Técnicas de optimización SSR:
// 1. Streaming SSR con Suspense (Next.js 13+)
import { Suspense } from 'react'
export default function Page() {
return (
}>
)
}
// 2. Caching agresivo con Redis
import { redis } from '@/lib/redis'
export async function getServerSideProps() {
const cacheKey = 'user:data:123'
let data = await redis.get(cacheKey)
if (!data) {
data = await fetchExpensiveData()
await redis.set(cacheKey, JSON.stringify(data), 'EX', 300) // 5 min cache
} else {
data = JSON.parse(data)
}
return { props: { data } }
}
Ideal para:
// pages/products/[id].js
export async function getStaticProps({ params }) {
const product = await fetchProduct(params.id)
return {
props: { product },
revalidate: 60, // Regenera cada 60 segundos
}
}
export async function getStaticPaths() {
return {
paths: [], // No genera nada en build time
fallback: 'blocking', // Genera on-demand y cachea
}
}
Comparativa de rendimiento:
| Método | TTFB | Build Time | Costo Server | Frescura Datos |
|---|---|---|---|---|
| SSG | 50ms | Alto | Bajo | Baja |
| ISR | 50-200ms | Bajo | Bajo | Media |
| SSR | 200-500ms | N/A | Alto | Alta |
Las fuentes pueden agregar 300-500ms al tiempo de carga. Next.js tiene soluciones integradas.
// pages/_app.js con next/font
import { Inter, Roboto_Mono } from 'next/font/google'
const inter = Inter({
subsets: ['latin'],
display: 'swap', // Evita FOIT (Flash of Invisible Text)
preload: true,
variable: '--font-inter',
})
const robotoMono = Roboto_Mono({
subsets: ['latin'],
display: 'swap',
variable: '--font-roboto-mono',
})
export default function App({ Component, pageProps }) {
return (
)
}
/* styles/globals.css */
body {
font-family: var(--font-inter), system-ui, -apple-system, sans-serif;
}
code {
font-family: var(--font-roboto-mono), 'Courier New', monospace;
}
Resultado: Eliminación de layout shift por fuentes, mejora de CLS de 0.15 a 0.05.
// middleware.js
import { NextResponse } from 'next/server'
export function middleware(request) {
const response = NextResponse.next()
// Headers de seguridad y performance
response.headers.set('X-DNS-Prefetch-Control', 'on')
response.headers.set('X-Frame-Options', 'SAMEORIGIN')
response.headers.set('X-Content-Type-Options', 'nosniff')
// Cache agresivo para assets estáticos
if (request.nextUrl.pathname.startsWith('/_next/static')) {
response.headers.set(
'Cache-Control',
'public, max-age=31536000, immutable'
)
}
// Preconnect a servicios externos
response.headers.set(
'Link',
'<https://fonts.googleapis.com>; rel=preconnect'
)
return response
}
# Instala el analizador
npm install @next/bundle-analyzer
# next.config.js
const withBundleAnalyzer = require('@next/bundle-analyzer')({
enabled: process.env.ANALYZE === 'true',
})
module.exports = withBundleAnalyzer({
// tu config
})
# Analiza tu bundle
ANALYZE=true npm run build
Problemas comunes que encontrarás:
# Lighthouse CI
npm install -g @lhci/cli
lhci autorun --collect.url=https://tu-sitio.com
# WebPageTest API
curl "https://www.webpagetest.org/runtest.php?url=https://tu-sitio.com&k=TU_API_KEY"
# Core Web Vitals en desarrollo
npm install web-vitals
Con estas optimizaciones, aplicaciones Next.js reales han logrado:
La optimización no es un evento único, es un proceso continuo. Implementa estas técnicas gradualmente, mide el impacto con herramientas como Lighthouse y Google Analytics, y ajusta según los datos reales de tus usuarios.
Próximo paso: Empieza por optimizar las imágenes y elegir la estrategia de renderizado correcta. Estos dos cambios solos pueden darte mejoras del 40-60% en tiempo de carga.
