Fermer

septembre 9, 2021

Utilisation des crochets SWR React avec la régénération statique incrémentielle (ISR) de Next.js


Résumé rapide ↬

Lorsqu'il est associé aux routes API ISR et Next.js, SWR peut être utilisé pour créer une expérience utilisateur réactive. Dans cet article, Sam Poder explique ce qu'est le SWR, où l'utiliser (et où non) et comment créer un site Web à l'aide de la régénération statique incrémentielle.

Si vous avez déjà utilisé Régénération statique incrémentielle (ISR) avec Next.jsvous vous êtes peut-être retrouvé à envoyer des données obsolètes au client. Cela se produit lorsque vous revalidez la page sur le serveur. Pour certains sites Web, cela fonctionne, mais pour d'autres (comme Hack Club's Scrapbookun site créé par @lachlanjc que j'aide à maintenir), l'utilisateur s'attend à ce que les données soient conservées jusqu'à date.

La première solution qui vient à l'esprit peut être de simplement afficher les pages côté serveur, en veillant à ce que le client reçoive toujours les données les plus à jour. Cependant, la récupération de gros morceaux de données avant le rendu peut ralentir le chargement initial de la page. La solution utilisée dans Scrapbook consistait à utiliser la bibliothèque SWR de crochets React pour mettre à jour la page mise en cache à partir du serveur avec la récupération de données côté client . Cette approche garantit que les utilisateurs ont toujours une bonne expérience, que le site est rapide et que les données sont tenues à jour.

Meet SWR

SWR est une bibliothèque React Hooks construite par Vercel, le nom vient du terme stale-pendant-revalider. Comme son nom l'indique, votre client recevra des données obsolètes/anciennes tandis que les données les plus récentes sont récupérées (revalidées) via SWR côté client. SWR ne se contente pas de revalider les données une fois, cependant, vous pouvez configurer SWR pour revalider les données sur un intervalle, lorsque l'onglet retrouve le focus, lorsqu'un client se reconnecte à Internet ou par programmation.

Lorsqu'il est associé à ISR et Next.js. ' Routes API, SWR peut être utilisé pour créer une expérience utilisateur réactive. Le client reçoit d'abord la page générée statiquement en cache (générée avec getStaticProps()), en arrière-plan, le serveur commence également le processus de revalidation de cette page (en savoir plus ici). Ce processus est rapide pour le client et il peut désormais voir l'ensemble des données, mais il peut être un peu obsolète. Une fois la page chargée, une requête d'extraction est envoyée à votre route API Next.js qui renvoie les mêmes données que celles générées avec getStaticProps(). Lorsque cette demande est terminée (en supposant qu'elle ait réussi), SWR mettra à jour la page avec ces nouvelles données.

Revenons maintenant à Scrapbook et comment cela a aidé à résoudre le problème d'avoir des données obsolètes sur la page . La chose évidente est que maintenant, le client obtient une version mise à jour. La chose la plus intéressante, cependant, est l'impact sur la vitesse de notre côté. Lorsque nous mesurons la vitesse via Lighthouse, nous obtenons un indice de vitesse de 1,5 secondes pour la variante ISR + SWR du site et de 5,8 secondes pour la variante Server Side Rendering (plus un avertissement concernant temps de réponse initial du serveur). C'est un contraste assez frappant entre les deux (et cela était également perceptible lors du chargement des pages). Mais il y a aussi un compromis, sur la page Server Side Rendered, l'utilisateur n'a pas modifié la mise en page du site après quelques secondes avec l'arrivée de nouvelles données. Bien que je pense que Scrapbook gère bien cette mise à jour, c'est une considération importante lorsque concevoir l'expérience de votre utilisateur.

Plus après le saut ! Continuez à lire ci-dessous ↓

Où utiliser SWR (et où ne pas le faire)

SWR peut être mis en place dans une variété d'endroits, voici quelques catégories de sites où SWR ferait un excellent fit :

  • Sites avec des données en direct qui nécessitent une mise à jour rapide.
    Des exemples de tels sites seraient les sites de résultats sportifs et le suivi des vols. Lors de la création de ces sites, vous chercheriez à utiliser l'option de revalidation à intervalle avec un paramètre d'intervalle faible (une à cinq secondes).
  • Sites avec un style de flux de mises à jour ou de publications qui se mettent à jour en temps réel.
    Le classique un exemple de ceci serait les sites d'actualités qui ont des blogs en direct d'événements tels que les élections. Un autre exemple serait également le Scrapbook susmentionné. Dans ce cas, vous souhaiterez probablement également utiliser l'option de revalidation à intervalle, mais avec un paramètre d'intervalle plus élevé (de trente à soixante secondes) pour économiser sur l'utilisation des données et éviter les appels d'API inutiles.
  • Sites avec des mises à jour de données plus passives, que les gens gardent beaucoup ouverts en arrière-plan.
    Des exemples de ces sites seraient les pages météo ou les pages de numéros de cas COVID-19 des années 2020. Ces pages ne sont pas mises à jour aussi fréquemment et n'ont donc pas besoin de la revalidation constante des deux exemples précédents. Cependant, cela améliorerait toujours l'expérience utilisateur pour la mise à jour des données. Dans ces cas, je recommanderais de revalider la date à laquelle l'onglet retrouve le focus et lorsqu'un client se reconnecte à Internet, cela signifie que si une personne revient anxieusement au robinet en espérant qu'il n'y a eu qu'une petite augmentation des cas de COVID, ils vont obtenez ces données rapidement.
  • Sites avec de petites données avec lesquelles les utilisateurs peuvent interagir.
    Pensez au bouton Youtube Subscribe, lorsque vous cliquez sur vous abonner, vous voulez voir ce nombre changer et sentir que vous avez fait une différence. Dans ces cas, vous pouvez revalider les données par programmation à l'aide de SWR pour récupérer le nouveau compte et mettre à jour le montant affiché.

Une chose à noter, c'est que ceux-ci peuvent tous être appliqués avec ou sans ISR.

Il y a bien sûr certains endroits où vous ne voudrez pas utiliser SWR ou utiliser SWR sans ISR. SWR n'est pas très utile si vos données ne changent pas ou changent très rarement et peuvent à la place obstruer vos demandes de réseau et utiliser les données des utilisateurs mobiles. SWR peut fonctionner avec des pages nécessitant une authentification, mais vous souhaiterez utiliser le rendu côté serveur dans ces cas et non la régénération statique incrémentielle.

Utilisation de SWR avec Next.js et régénération statique incrémentielle

Nous avons maintenant exploré la théorie de cette stratégie, explorons comment nous la mettons en pratique. Pour cela, nous allons créer un site Web qui montre combien de taxis sont disponibles à Singapour (où j'habite !) en utilisant cette API fournie par le gouvernement.

Structure du projet

Notre projet va fonctionne en ayant trois fichiers :

  • lib/helpers.js
  • pages/index.js (notre fichier frontend)
  • pages/api/index.js (notre fichier API)[19659020]Notre fichier d'aide exportera une fonction (getTaxiData) qui récupérera les données de l'API externe, puis les renverra dans un format approprié pour notre utilisation. Notre fichier API importera cette fonction et définira son exportation par défaut vers une fonction de gestionnaire qui appellera la fonction getTaxiData puis la renverra, cela signifiera l'envoi d'une requête GET à /api renverra nos données.

    Nous aurons besoin de cette capacité pour que SWR effectue la récupération de données côté client. Enfin, dans notre fichier frontend, nous importerons getTaxiData et l'utiliserons dans getStaticPropsses données seront transmises à la fonction d'exportation par défaut de notre fichier frontend qui rendra notre page React. Nous faisons tout cela pour éviter la duplication de code et assurer la cohérence de nos données. Quelle bouchée, commençons maintenant la programmation.

    Le fichier Helpers

    Nous commencerons par créer la fonction getTaxiData dans lib/helpers.js :[19659033]exporter la fonction asynchrone getTaxiData(){
    let data = wait fetch ("https://api.data.gov.sg/v1/transport/taxi-availability").then(r => r.json())
    retourner {taxis : data.features.properties[0].taxi_count, mis à jour à : data.features.properties[0].timestamp}
    }

    Le fichier API

    Nous allons ensuite construire la fonction de gestionnaire dans api/index.js ainsi qu'importer la fonction getTaxiData :

    import { getTaxiData } de '../../lib/helpers'
    exporter le gestionnaire de fonction asynchrone par défaut (req, res){
        res.status(200).json(attendez getTaxiData())
    }

    Il n'y a rien ici d'unique à SWR ou ISR, à part la structure de projet susmentionnée. Cela commence maintenant dans index.js !

    Le fichier frontal

    La première chose que nous voulons faire est de créer notre fonction getStaticProps ! Cette fonction importera notre fonction getTaxiDatal'utilisera, puis renverra les données avec une configuration supplémentaire.

    export async function getStaticProps(){
        const { getTaxiData } = require("../lib/helpers")
        return { props : (attendez getTaxiData()), revalidez : 1 }
    }

    Je voudrais me concentrer sur la clé de revalidation dans notre objet renvoyé. Cette clé permet pratiquement la régénération statique incrémentielle. Il indique à votre hôte que chaque seconde de régénération de la page statique est une option disponible, cette option est ensuite déclenchée en arrière-plan lorsqu'un client visite votre page. Vous pouvez en savoir plus sur Régénération statique incrémentielle (ISR) ici.

    Il est maintenant temps d'utiliser SWR ! Importons-le d'abord :

    importez useSWR depuis 'swr'

    Nous allons utiliser SWR dans notre fonction de rendu React, créons donc cette fonction :

    exporter la fonction par défaut App(props){
    }

    Nous recevons les accessoires de getStaticProps. Nous sommes maintenant prêts à configurer SWR :

    const fetcher = (...args) => fetch(...args).then(res => res.json())
    const { data } = useSWR("/api", fetcher, {initialData: props, refreshInterval: 30000})

    Décomposons cela. Premièrement, nous définissons le fetcher. Ceci est requis par SWR comme argument afin qu'il sache comment récupérer vos données étant donné que différents frameworks, etc. peuvent avoir des configurations différentes. Dans ce cas, j'utilise la fonction fournie sur la page des documents SWR. Ensuite, nous appelons le hook useSWRavec trois arguments : le chemin à partir duquel récupérer les données, la fonction fetcher puis un objet options.

    Dans cet objet optionsnous avons a spécifié deux choses :

    • les données initiales
    • l'intervalle auquel SWR doit revalider les données

    L'option de données initiales est l'endroit où nous fournissons les données extraites de getStaticProps qui garantit que les données sont visibles dès le début. Enfin, nous utilisons la déstructuration d'objet pour extraire les données du hook.

    Pour finir, nous allons rendre ces données avec du JSX très basique :

    return 
    À partir de {data.updatedAt}, {data.taxis} taxis disponibles à Singapour !

    Et nous l'avons fait ! Nous avons là un exemple très simple d'utilisation du SWR avec la régénération statique incrémentielle. (La source de notre exemple est disponible ici.)

    Si jamais vous rencontrez des données obsolètes avec ISR, vous savez qui appeler : SWR.

    Pour en savoir plus sur SmashingMag

    Smashing Editorial (vf, yk, il)




Source link