Next.js 16.3 incluye un hook experimental useOffline que permite que un componente reaccione en el momento en que el navegador pierde su conexión de red. Al llamar a const isOffline = useOffline() puedes alternar la interfaz de usuario al instante —por ejemplo, renderizar “Estás desconectado” en lugar de la aplicación principal— sin tener que esperar a que una solicitud falle.

Por qué este hook es importante ahora

Los desarrolladores han dependido durante mucho tiempo de los eventos online/offline del navegador, pero esos eventos son de bajo nivel y requieren una implementación manual. El nuevo hook de Next.js abstrae el boilerplate en una sola línea, encajando perfectamente en el paradigma de Next.js centrado en React. El beneficio inmediato es una experiencia de usuario más fluida: los botones que necesitan una API en vivo pueden desactivarse, los formularios pueden bloquearse y puede aparecer un aviso amigable en el segundo en que se pierde la conectividad. Esto evita errores silenciosos que, de otro modo, solo aparecerían tras un fallo en el fetch.

Cómo añadirlo a una página

import { useOffline } from 'next/navigation';

export default function Home() {
  const isOffline = useOffline();

  return isOffline ? (
    <p>You are offline</p>
  ) : (
    <App />
  );
}

El hook devuelve un booleano que se actualiza en tiempo real, por lo que cualquier renderizado condicional o efecto puede reaccionar al instante. Debido a que reside en el paquete next/navigation, funciona tanto en páginas renderizadas en el lado del cliente como en componentes de servidor que se hidratan en el cliente.

Limitaciones que debes tener en cuenta

El hook no convierte un sitio en una aplicación offline-first. Simplemente informa del estado de la conectividad. Para mantener el contenido utilizable cuando no hay red, todavía tienes que:

  • Cachear activos estáticos con el optimizador de activos integrado de Next.js o un service worker.
  • Almacenar datos dinámicos en IndexedDB u otro almacén del lado del cliente.
  • Implementar la sincronización en segundo plano o la lógica de reintento para el envío de formularios.

Sin esas piezas, la interfaz de usuario puede informar al usuario de que está desconectado, pero la aplicación seguirá sin poder cargar nuevos datos.

Riesgos de utilizar una API experimental

Debido a que useOffline está marcado como experimental, su firma o comportamiento podría cambiar en una versión futura. Los proyectos que integren el hook en la lógica de negocio principal podrían necesitar realizar ajustes cuando Next.js se actualice. Un enfoque prudente es envolver el hook tras una utilidad interna que pueda sustituirse si la API evoluciona.

Qué esperar a continuación

Next.js ha insinuado un soporte offline más amplio en próximos lanzamientos, posiblemente integrando estrategias de caché directamente en el framework. Mantente atento a las notas de la versión para cualquier cambio de “experimental” a estable, y para nuevas APIs que complementen a useOffline con persistencia de datos automática.

Conclusión: useOffline ofrece a los desarrolladores una forma rápida de detectar la pérdida de conectividad y adaptar la interfaz de usuario, pero es solo el primer paso. Las experiencias offline robustas aún requieren mecanismos explícitos de caché y sincronización, y el estado experimental del hook significa que los equipos deben aislar su uso para evitar futuros dolores de cabeza por refactorización.