Che cos’è l’SWR e come lo usi in Next.js?

SWR (state-while-revalidate) è un metodo di recupero dei dati creato da Vercel. Funziona recuperando prima i dati, inviando una richiesta di recupero per riconvalidarli, quindi restituendo i dati aggiornati.

SWR è molto potente in quanto non solo consente il recupero dei dati riutilizzabili, ma dispone anche di memorizzazione nella cache, impaginazione e rivalidazione integrate. Utilizzando SWR, un sito Web visualizza il contenuto memorizzato nella cache mentre recupera il contenuto aggiornato in background.

Come funziona l’SWR?

Normalmente, recupererai i dati utilizzando Axios o il metodo fetch. Questi metodi si connettono alla risorsa dati, recuperano e restituiscono i dati, quindi chiudono la connessione. Tuttavia, SWR recupera i dati in modo diverso. Funziona in tre fasi:

1. Restituisce i dati obsoleti dalla cache.
2. Invia la richiesta di recupero per riconvalidare i dati.
3. Restituisce dati aggiornati.

SWR non sostituisce l’API di recupero. Invece, ti consente di visualizzare i contenuti memorizzati nella cache sul tuo sito non appena l’utente visita e di aggiornare tali contenuti quando diventano obsoleti.

Quindi, come fa SWR a sapere quando la cache non è valida? Attraverso una risposta di intestazione di controllo della cache. La risposta ha due stati: fresco e stantio. Uno stato nuovo significa che la cache può essere riutilizzata mentre uno stato non aggiornato indica che non è valida. Si specifica il tempo in cui la risposta rimane valida nella direttiva max-age.

SWR considera non valida qualsiasi risposta memorizzata nella cache più vecchia di max-age. Dopo che l’app ha eseguito il rendering dei dati memorizzati nella cache non aggiornati, SWR li riconvaliderà e restituirà nuovi dati che puoi utilizzare per aggiornare la pagina.

Come recuperare i dati in Next.js con SWR

Inizia a utilizzare SWR in React installandolo prima tramite un gestore di pacchetti. Questo comando usa npm.

npm install swr\n

In un file componente, importa l’hook useSWR da swr.

import useSWR from "swr"\n

L’hook useSWR accetta due argomenti:

1. Un identificatore univoco per i dati. Di solito l’URL dell’API.
2. Una funzione recuperatore. Questa è la funzione utilizzata per recuperare i dati. Può utilizzare fetch, Axios o altri strumenti di recupero dati.

L’hook restituisce i dati e un oggetto errore. Assicurati di utilizzare questo gancio in conformità con le migliori pratiche.

Ecco un esempio che mostra come utilizzare l’hook useSWR.

const fetcher = (...args) => fetch(...args).then(res => res.json());\nconst {data, error} = useSWR("/api/data", fetcher);\n

Puoi eseguire il rendering dei dati in un componente come questo:

import useSWR from "swr"\nfunction Home () {\n const fetcher = (...args) => fetch(...args).then(res => res.json());\n const {data, error} = useSWR("/api/data", fetcher);\n if (error) return <div>failed to load</div>\n if (!data) return <div>loading...</div>\n return <div>{data}</div>\n}\n

Questa è una semplice implementazione di SWR. I documenti SWR sono più approfonditi, quindi dai un’occhiata per saperne di più.

Perché usare SWR?

SWR ha molti vantaggi rispetto ad altri metodi di recupero dei dati.

Cache

Con i tradizionali metodi di recupero dei dati, devi utilizzare uno spinner o un messaggio di caricamento per migliorare l’esperienza dell’utente quando l’app recupera i dati.

SWR ti consente di visualizzare i dati obsoleti all’utente, mentre li riconvalidi. Ciò significa che l’utente non deve attendere che il fetcher restituisca i dati.

Riconvalida

Attraverso la riconvalida, SWR rende nuovamente aggiornati i dati memorizzati nella cache e la pagina viene nuovamente resa con dati aggiornati. La riconvalida è particolarmente importante per i siti il ​​cui contenuto cambia regolarmente.

Impaginazione

L’ hook useSWRInfinite di SWR ti consente di implementare facilmente l’impaginazione o persino di creare un’interfaccia utente di caricamento infinita.

Recupero della posizione di scorrimento

SWR consente a un utente di tornare alla posizione di scorrimento su una pagina quando torna su di essa. Ciò contribuisce a una migliore esperienza utente.

Recupero dati dipendente

È possibile recuperare dati che dipendono da altri dati. Consente di utilizzare i dati restituiti da una richiesta in un’altra richiesta.

Usa SWR per migliorare l’usabilità

SWR è uno strumento di recupero dei dati con una funzione di riconvalida automatica che consente alle applicazioni di eseguire il rendering del contenuto memorizzato nella cache mentre attendono il contenuto aggiornato. Gli utenti possono interagire immediatamente con i contenuti invece di attendere che il server restituisca i dati.

SWR ti aiuta anche a creare impaginazione, caricamento infinito, ripristino della posizione di scorrimento e altre funzionalità complesse. Se stai recuperando dati che necessitano di aggiornamenti regolari, dovresti assolutamente considerare di utilizzarli.