Next.js 16.3 introduce un hook sperimentale useOffline che permette a un componente di reagire nell'istante in cui il browser perde la connessione di rete. Chiamando const isOffline = useOffline() è possibile alternare istantaneamente l'interfaccia utente (UI) – ad esempio, visualizzando "Sei offline" invece dell'app principale – senza dover attendere il fallimento di una richiesta.

Perché questo hook è importante ora

Gli sviluppatori si sono affidati a lungo agli eventi online/offline del browser, ma tali eventi sono a basso livello e richiedono una configurazione manuale. Il nuovo hook di Next.js astrae il boilerplate in una singola riga, integrandosi perfettamente nel paradigma "React-first" del framework. Il vantaggio immediato è un'esperienza utente più fluida: i pulsanti che richiedono un'API attiva possono essere disabilitati, i moduli possono essere bloccati e un avviso amichevole può apparire nell'istante in cui si perde la connettività. Ciò evita errori silenziosi che altrimenti si manifesterebbero solo dopo il fallimento di una fetch.

Come aggiungerlo a una pagina

import { useOffline } from 'next/navigation';

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

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

L'hook restituisce un valore booleano che si aggiorna in tempo reale, quindi qualsiasi rendering condizionale o effetto può reagire istantaneamente. Poiché risiede nel pacchetto next/navigation, funziona sia sulle pagine renderizzate lato client che sui server-component che effettuano l'idratazione sul client.

Limiti per cui è necessario pianificare

L'hook non trasforma un sito in un'app offline-first. Si limita a segnalare lo stato della connettività. Per mantenere i contenuti utilizzabili quando la rete viene meno, è comunque necessario:

  • Sfruttare la cache per gli asset statici con l'ottimizzatore di asset integrato in Next.js o un service worker.
  • Memorizzare i dati dinamici in IndexedDB o in un altro store lato client.
  • Implementare la sincronizzazione in background o una logica di retry per l'invio dei moduli.

Senza questi elementi, l'interfaccia utente potrebbe informare l'utente che è offline, ma l'app non sarà comunque in grado di caricare nuovi dati.

Rischi nell'uso di un'API sperimentale

Poiché useOffline è contrassegnato come sperimentale, la sua firma o il suo comportamento potrebbero cambiare in una release futura. I progetti che integrano l'hook nella logica di business principale potrebbero dover apportare modifiche quando Next.js si aggiorna. Un approccio prudente consiste nell'avvolgere l'hook all'interno di una utility interna che possa essere sostituita qualora l'API evolvesse.

Cosa aspettarsi in futuro

Next.js ha accennato a un supporto offline più ampio nelle prossime release, possibilmente integrando le strategie di caching direttamente nel framework. Tieni d'occhio le note di rilascio per qualsiasi passaggio da "sperimentale" a "stabile" e per nuove API che integrino useOffline con la persistenza automatica dei dati.

In sintesi: useOffline offre agli sviluppatori un modo rapido per rilevare la perdita di connettività e personalizzare l'interfaccia utente, ma è solo il primo passo. Esperienze offline robuste richiedono ancora meccanismi espliciti di caching e sincronizzazione, e lo stato sperimentale dell'hook significa che i team dovrebbero isolarne l'uso per evitare futuri mal di testa dovuti al refactoring.