Comment gérer la récupération de données dans Next.js
Next.js est un framework robuste qui permet aux développeurs de créer rapidement des applications React rendues côté serveur. Il a diverses caractéristiques essentielles. L’une de ses principales caractéristiques est sa capacité à récupérer facilement des données et à les rendre facilement accessibles aux composants.
La récupération de données est une fonctionnalité essentielle qui permet aux développeurs de récupérer et d’afficher des données sur un site Web/une application Web. Il existe plusieurs façons de récupérer des données dans Next.js, chacune avec ses avantages et ses cas d’utilisation. Cet article explore différentes manières de récupérer des données dans Next.js.
Utiliser le crochet useEffect pour récupérer des données
Le crochet useEffect est un crochet 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 crochet est utile pour les pages qui ont besoin de données dynamiques, comme les pages de profil utilisateur qui affichent des informations particulières à l’utilisateur connecté.
Pour utiliser le crochet useEffect, vous devez d’abord l’importer dans le composant de votre choix, récupérer les données et rendre votre page en l’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. If 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 d’extraction.
Le tableau de dépendances que vous transmettez au hook useEffect doit contenir la valeur dont dépend l’effet. Le composant réexécutera l’effet uniquement lorsque la valeur dans le tableau de dépendances changera. Si le tableau de dépendances est vide, comme dans cet exemple, l’effet ne s’exécutera que sur le premier rendu.
Gestion de la revalidation automatique à l’aide de SWR
La bibliothèque SWR (stale-while-revalidate) est une bibliothèque de crochets React pour gérer 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 fonctionnalités clés de la bibliothèque SWR est sa capacité à automatiser la revalidation des données. Cette fonctionnalité est essentielle lorsque les données sont mises à jour fréquemment et que vous en avez besoin pour être constamment à jour. Cette fonctionnalité garantit que votre application a toujours accès aux données les plus récentes, ce qui la rend plus dynamique et réactive pour vos utilisateurs.
La bibliothèque SWR envoie une nouvelle requête de récupération à une API lorsqu’un utilisateur se recentre sur une page ou bascule entre les onglets. Lorsqu’un utilisateur quitte une page, les données affichées à l’écran deviennent obsolètes. Lorsqu’ils reviennent sur la page, la bibliothèque SWR envoie une nouvelle requête de récupération à l’API et compare les nouvelles données aux données obsolètes pour déterminer si elles ont changé.
Pour empêcher la bibliothèque SWR d’effectuer cette action, vous pouvez utiliser l’ option revalidateOnFocus .
Ainsi:
const { data, error, isLoading } = useSWR('https://api.example.com/data', fetcher, {
revalidateOnFocus: false,
})
La définition de la propriété revalidateOnFocus sur false garantit que la bibliothèque SWR ne revalide pas vos données à chaque fois que vous vous recentrez sur la page.
La bibliothèque SWR revalide également les données chaque fois qu’un utilisateur se reconnecte à Internet. Cette action peut être très utile dans certaines situations et fonctionne automatiquement.
Pour désactiver l’action, vous pouvez utiliser l’ option revalidateOnReconnect :
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 d’extraction
La bibliothèque isomorphic-unfetch est une petite bibliothèque légère qui peut effectuer des requêtes de récupération dans une application Next.js. La bibliothèque est une excellente alternative à l’ API de récupération native . Il est simple à utiliser, ce qui le rend parfait pour les développeurs novices en matière de requêtes de récupération.
Vous pouvez utiliser isomorphic-unfetch comme 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 adaptée au travail sur de 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 à la fois côté client et côté serveur.
Récupération efficace des données avec Next.js
La récupération de données est une fonctionnalité importante lors du développement d’applications. Next.js propose plusieurs façons de récupérer 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.
Laisser un commentaire