Next.js est un framework robuste qui permet aux développeurs de construire rapidement des applications React rendues côté serveur. Il possède diverses fonctionnalités essentielles. L’une de ses principales caractéristiques est sa capacité à récupérer facilement des données et à les rendre facilement disponibles pour les composants.


La récupération de données est une fonction essentielle qui permet aux développeurs de récupérer et d’afficher des données sur un site Web ou une application Web. Il existe plusieurs façons différentes de récupérer des données dans Next.js, chacune ayant ses avantages et ses cas d’utilisation. Cet article explore les différentes façons de récupérer des données dans Next.js.

Utilisation du crochet useEffect pour récupérer des données

Le site useEffect est un hook React utilisé pour effectuer des effets secondaires, tels que des appels d’API dans les composants. Vous pouvez utiliser le hook useEffect pour récupérer des données dans Next.js.

Ce hook est utile pour les pages qui ont besoin de données dynamiques, comme les pages de profil utilisateur qui affichent des informations propres à l’utilisateur connecté.

Pour utiliser le hook useEffect, vous devez d’abord l’importer dans le composant de votre choix, récupérer les données et rendre votre page en les utilisant.

Par exemple :

 import { useEffect, useState } from 'react';

export default function Home() {
    const [data, setData] = useState("");

    useEffect(() => {
        fetch('https://api.example.com/data');
            .then( (response) => response.json() )
            .then( (data) => setData(data) )
    }, []); 

    return (
        <div>
            {data.name}
        </div>
    )
}

Ce bloc de code utilise le crochet useEffect pour récupérer des données à partir d’une API. Il passe deux paramètres au hook useEffect : une fonction pour récupérer les données et un tableau de dépendances. En cas de succès, il utilise setData() pour mettre à jour l’état du composant avec les données renvoyées par la requête de récupération.

Le tableau de dépendances que vous transmettez au hook useEffect doit contenir la valeur dont dépend l’effet. Le composant ne réexécutera l’effet que lorsque la valeur contenue dans le tableau de dépendances changera. Si le tableau de dépendances est vide, comme dans cet exemple, l’effet ne sera exécuté qu’au premier rendu.

Gestion de la revalidation automatique avec SWR

Le site SWR (stale-while-revalidate) est une bibliothèque de crochets React pour la gestion de la récupération de données. Vous devez d’abord configurer la bibliothèque SWR pour l’utiliser dans votre application Next.

L’une des principales caractéristiques de la bibliothèque SWR est sa capacité à automatiser la revalidation des données. Cette fonctionnalité est essentielle lorsque les données sont fréquemment mises à jour et que vous avez besoin qu’elles le soient en permanence. Cette fonctionnalité garantit que votre application a toujours accès aux données les plus récentes, ce qui la rend plus dynamique et plus adaptée à vos utilisateurs.

La bibliothèque SWR envoie une nouvelle demande d’extraction à une API lorsqu’un utilisateur refait le focus sur une page ou passe d’un onglet à l’autre. Lorsqu’un utilisateur quitte une page, les données affichées à l’écran deviennent périmées. Lorsqu’il revient sur la page, la bibliothèque SWR envoie une nouvelle demande d’extraction à l’API et compare les nouvelles données aux données périmées pour déterminer si elles ont changé.

Pour empêcher la bibliothèque SWR d’effectuer cette action, vous pouvez utiliser la commande revalidateOnFocus option.

Comme ça :

 const { data, error, isLoading } = useSWR('https://api.example.com/data', fetcher, {
    revalidateOnFocus: false,
})

En définissant la propriété revalidateOnFocus sur false, la bibliothèque SWR ne revalidera pas vos données à chaque fois que vous vous recentrez sur la page.

La bibliothèque SWR revalide également les données lorsqu’un utilisateur se reconnecte à l’Internet. Cette action peut être très utile dans certaines situations et fonctionne automatiquement.

Pour désactiver cette action, vous pouvez utiliser la commande revalidateOnReconnect option :

 const { data, error, isLoading } = useSWR('https://api.example.com/data', fetcher, {
    revalidateOnReconnect: false,
})

Pour désactiver la revalidation automatique de vos données, définissez les propriétés revalidateOnFocus et revalidateOnRecconect sur false.

Utilisation de la bibliothèque Isomorphic-Unfetch pour effectuer des requêtes Fetch

Le site isomorphic-unfetch est une petite bibliothèque légère qui permet d’effectuer des requêtes de récupération dans une application Next.js. Cette bibliothèque est une excellente alternative à la bibliothèque native fetch API. Elle est simple à utiliser, ce qui la rend parfaite pour les développeurs qui ne connaissent pas encore les requêtes fetch.

Vous pouvez utiliser isomorphic-unfetch comme un polyfill pour les anciens navigateurs qui ne prennent pas en charge l’API de récupération native. La bibliothèque isomorphic-unfetch est minimaliste et convient aux petites applications.

Pour utiliser isomorphic-unfetch dans une application Next.js, installez la bibliothèque en exécutant la commande suivante :

 npm install isomorphic-unfetch

Vous pouvez ensuite importer la bibliothèque et l’utiliser dans votre composant pour récupérer des données, comme ceci :

 import Fetch from 'isomorphic-unfetch'
import {useState, useEffect} from 'react'

export default function Home() {
    const [data, setData] = useState(null)

    useEffect(() => {
        Fetch('https://api.example.com/data')
            .then( (response) => response.json)
            .then( (data) => setData(data) )
    }, [])
 
    if (!data) return <div>Loading...</div>

    return (
        <div>
            <h1>{data.name}</h1>
        </div>
    )
}

La fonction isomorphic-unfetch fonctionne aussi bien du côté client que du côté serveur.

Récupération efficace des données avec Next.js

L’extraction de données est une fonctionnalité importante lors du développement d’applications. Next.js propose plusieurs façons d’extraire des données, chacune ayant ses avantages et ses inconvénients.

Lorsque vous décidez de la méthode à utiliser, tenez compte des compromis et assurez-vous d’utiliser une technique avec laquelle vous êtes à l’aise.