7 Abr, 2026
SWR en Next.js: Velocidad extrema en el manejo de datos
Desarrollo , , ,

Aprende cómo transformar la experiencia de usuario utilizando la estrategia Stale-While-Revalidate para interfaces instantáneas.

1. Introducción: La Velocidad es Clave en la Web Moderna

En el ecosistema actual del desarrollo web, la velocidad no es solo una característica; es una necesidad crítica. Un retraso de apenas unos segundos en la carga de datos puede disparar la tasa de rebote y arruinar la experiencia del usuario. Los usuarios esperan interfaces que respondan al instante, sin pantallas en blanco ni esperas prolongadas.

Para resolver este desafío, Vercel (el equipo detrás de Next.js) creó SWR. El nombre proviene de stale-while-revalidate, una estrategia de invalidación de caché de HTTP que permite a las aplicaciones mostrar datos de forma inmediata.

La promesa de SWR es simple: hacer que tu aplicación se sienta instantánea. En lugar de obligar al usuario a esperar a que termine una petición de red, SWR muestra datos “antiguos” o en caché (stale) mientras busca los datos más recientes en segundo plano (revalidate). El resultado es una navegación fluida, actualizaciones automáticas y una reducción drástica del código necesario para gestionar estados complejos de carga y error.

2. Entendiendo el “Truco” de SWR: Stale-While-Revalidate

El concepto de Stale-While-Revalidate es el núcleo de esta librería. Se desglosa de la siguiente manera:

  • Stale (Antiguo): SWR busca primero en su caché interna. Si encuentra datos de una petición anterior, los entrega de inmediato a la interfaz de usuario.
  • Revalidate (Revalidar): Al mismo tiempo que el usuario ve los datos antiguos, SWR lanza una petición en segundo plano para verificar si hay cambios en la fuente original.
  • Actualización Silenciosa: Si los datos nuevos son distintos a los que estaban en caché, SWR actualiza automáticamente el componente.

Este flujo elimina la sensación de “aplicación lenta” porque el usuario casi siempre tiene algo que ver en pantalla mientras la red trabaja discretamente.

3. Empezando con SWR en Tu Proyecto Next.js

Implementar SWR es extremadamente sencillo. Primero, instalamos la librería:

Terminal

npm install swr

La herramienta principal es el hook useSWR, que requiere una llave (generalmente la URL de la API) y una función fetcher. El fetcher es simplemente una función asíncrona que retorna los datos.

#Ejemplo de código básico:

Profile.js

import useSWR from 'swr';

const fetcher = (url) => fetch(url).then((res) => res.json());

function Profile() {
  const { data, error, isLoading } = useSWR('/api/user', fetcher);

  if (error) return <div>Error al cargar</div>;
  if (isLoading) return <div>Cargando...</div>;

  return <div>Hola, {data.name}!</div>;
}

Aquí, useSWR gestiona por nosotros tres estados fundamentales: data (los resultados), error (si la promesa falla) e isLoading (el estado inicial de carga).

4. SWR y las Rutas de Next.js: App Router vs. Pages Router

Con la llegada del App Router en Next.js 13+, la arquitectura cambió hacia los Server Components. SWR es un hook de React, lo que significa que solo puede usarse en Client Components.

En el App Router (Next.js 13+)

Para usar SWR, debes marcar tu archivo con la directiva 'use client'. Sin embargo, la mejor estrategia es la hidratación. Puedes obtener los datos en el servidor (para SEO) y pasarlos a SWR como un valor inicial mediante el fallback:

page.js

// Server Component
export default async function Page() {
  const data = await getProfileData(); // Fetch en servidor
  return (
    <SWRConfig value={{ fallback: { '/api/user': data } }}>
      <Profile />
    </SWRConfig>
  );
}

En el Pages Router

Se utiliza de forma similar con getStaticProps o getServerSideProps, pasando los datos al componente y configurando el SWRConfig para que el cliente tome el relevo de la revalidación.

5. Funcionalidades Avanzadas de SWR

SWR no solo sirve para cargar datos, sino para mejorar la interactividad:

  • Actualizaciones Optimistas (Optimistic Updates): Permite actualizar la interfaz antes de que el servidor responda. Si cambias el nombre de un usuario, SWR lo muestra al instante; si la petición falla, SWR revierte el cambio automáticamente.
  • Carga Condicional: Puedes evitar peticiones innecesarias pasando null como llave si, por ejemplo, el usuario no ha iniciado sesión.
  • Carga Infinita: Gracias al hook useSWRInfinite, implementar un scroll infinito o un botón “Cargar más” es sencillo, gestionando automáticamente los índices de las páginas.

6. SWR: Un Set de Herramientas Inteligentes

SWR incluye comportamientos inteligentes por defecto:

  1. Revalidación al enfocar (Focus Revalidation): Si el usuario cambia de pestaña y vuelve a tu web, SWR actualiza los datos automáticamente para asegurar que la información esté fresca.
  2. Sondeo (Polling): Con la opción refreshInterval, puedes convertir tu app en una herramienta en tiempo real (útil para precios de criptomonedas o chats).
  3. Reintentos automáticos: Si la red falla, SWR no se rinde; utiliza un algoritmo de retroceso exponencial para intentar recuperar los datos sin saturar el servidor.
  4. Configuración Global: Puedes envolver tu aplicación en un SWRConfig para definir un único fetcher o reglas de reintento para todos tus componentes.

7. ¿Cuándo usar SWR y cuándo el fetch nativo de Next.js?

Usa fetch nativo

Para datos que no cambian constantemente, contenido estático que requiere el mejor SEO posible (blogs, páginas de marketing) y para reducir el bundle de JavaScript en el cliente.

Usa SWR

Para dashboards privados, paneles de control, aplicaciones que requieran interactividad constante, datos que dependan de la sesión del usuario o interfaces que necesiten actualizaciones optimistas.

8. Conclusión: Construye Experiencias Web Más Rápidas y Fluidas con SWR

SWR transforma la manera en que los usuarios perciben la velocidad de tu aplicación. Al separar la visualización de datos de la latencia de la red, permites que tu interfaz se sienta robusta y siempre disponible.

Integrar SWR en tus proyectos de Next.js no solo simplifica tu lógica de manejo de estados (eliminando múltiples useEffect), sino que eleva la calidad del producto final a estándares profesionales. ¡Anímate a implementarlo y experimenta la diferencia en rendimiento!

Fuentes y Referencias