L’Outil Surpuissant pour Exploser ton Chiffre d'Affaires en 2024 !
Stratégies de pré-rendu et de récupération de données dans Next.js
Next.js vous offre la possibilité de rendre différentes pages de votre application en utilisant différents modes de rendu. Dans cet article, nous aborderons les différentes stratégies disponibles pour déterminer la meilleure façon de récupérer les données lors de la création de votre application avec Next.js.
Lors de la création d’une application avec Next.js, l’une des choses que nous devons comprendre est de savoir comment récupérer nos données. Avec Next.js, il existe des moyens efficaces de récupérer vos données tout en offrant à votre utilisateur la meilleure expérience possible. Next.js est un framework hybride, et avec cette flexibilité, vous avez la liberté d’utiliser différents mécanismes de récupération de données pour différentes pages.
Cet article vous aidera à comprendre les différentes stratégies à votre disposition, en tant que développeur, pour déterminer la meilleure façon de récupérer des données lors de la création de votre application avec Next.js. Une connaissance de base de React et Next.js est nécessaire pour comprendre les concepts abordés ici. Commençons!
Rendu côté client
Pour les pages spécifiques à l’utilisateur, vous pouvez récupérer les données sur le client de la même manière que lorsque vous écrivez React en clair. Puisqu’ils incluent des données en constante évolution (tableaux de bord, pages d’authentification) qui n’ont pas besoin d’être indexées par les moteurs de recherche, il n’est pas nécessaire de pré-rendre ces pages. Next.js a également un crochet React appelé TOS qui optimise vos besoins de récupération de données côté client. SWR gère la mise en cache, la revalidation, le suivi de la mise au point, la récupération à des intervalles, et vous pouvez consulter le Documentation pour plus.
Pré-rendu dans Next.js
Par défaut, chaque page créée dans le pages dossier dans Next.js est pré-rendu à l’avance. Cela signifie que le code HTML de chaque page est généré à l’avance. Après quoi, le code JavaScript s’exécute pour rendre la page entièrement interactive, un processus connu sous le nom de Hydratation.
Next.js version 9.3 a introduit trois nouvelles fonctions intégrées pour les pages de pré-rendu.
- getStaticProps()
- getStaticPaths()
- getServerSideProps()
React nécessite toutes les données nécessaires avant de rendre la page, donc getStaticProps, getStaticPaths et getServerSideProps ne peut être exporté qu’à partir d’une page, pas à partir de fichiers autres que des pages. Nous allons jeter un œil à leurs différences et quand et comment les utiliser dans un instant.
En ce qui concerne le référencement, l’utilisation de React présente des inconvénients importants car les pages sont générées au moment de l’exécution par JavaScript. Par conséquent, rien ne s’affiche jusqu’au chargement de votre JavaScript, laissant l’utilisateur avec un écran vide. Avec Next.js, l’utilisateur verra instantanément le contenu de la page (HTML pré-rendu). Cependant, la page ne sera pas interactive (comme l’ouverture d’un modal) tant que le processus d’hydratation n’est pas terminé.
Il existe deux types de pré-rendu dans Next.js. La différence entre eux réside dans le moment où le code HTML d’une page est généré. La méthode que vous choisissez dépend du type de données dont il s’agit et du moment où vous souhaitez qu’elles soient disponibles pour votre utilisateur.
- Génération statique
- Rendu côté serveur
Génération statique (SSG) (recommandé)
Cette méthode de pré-rendu génère le code HTML de vos pages sur le serveur uniquement au moment de la construction, c’est-à-dire lorsque vous créez votre application pour la production (construction Next.js). Une fois le code HTML de votre page généré, il peut être mis en cache et servi par un CDN et réutilisé à chaque demande, le rendant disponible à l’avance aux visiteurs de votre site.
Quand utiliser la génération statique
Vous devez utiliser la génération statique si le contenu d’une page peut être pré-rendu avant la demande d’un utilisateur. Étant donné que le code HTML de chaque page sera créé à l’avance, évitez d’utiliser la génération statique pour les données qui ne sont disponibles qu’au moment de la demande ou les données qui changent fréquemment, car les données peuvent devenir obsolètes au moment de la demande. La génération statique conviendra aux pages dont le contenu change rarement, comme les articles de blog, les données qui ne sont pas spécifiques à l’utilisateur, etc.
Next.js permet également de générer statiquement des pages avec ou sans données. Jetons un coup d’œil à la différence entre eux.
Génération statique sans données
Next.js pré-rend statiquement une page par défaut si les données sont écrites directement dans le code source de l’application et ne nécessitent pas de récupération de données externes au moment de la construction.
export default function About() {
return (
<div>
<h1>About Us</h1>
<p>{}</p>
</div>
);
}
Notre About Us La page dans l’extrait de code ci-dessus ne nécessite pas de récupération de données externes et, par défaut, elle sera pré-rendu au moment de la construction.
Génération statique avec des données et des routes prédéfinies
Pour les pages qui dépendent de données externes (base de données, système de fichiers, etc.), il suffit d’exporter une async fonction appelée getStaticProps avec votre composant de page. Next.js saura exécuter le getStaticProps fonction et récupère les données au moment de la construction. Ensuite, tout ce qui est renvoyé comme accessoire sera transmis au composant exporté à partir de la page.
export default function HomePage(props) { ... }
export async function getStaticProps(context) {
const res = await fetch("...");
const data = await res.json();
return {
props: {
data
},
};
}
Dans l’extrait de code ci-dessus, nous récupérons nos données dans le getStaticProps fonction. Nous exportons également getStaticProps dans le même dossier que le HomePage composant, et il renvoie un objet avec props. Next.js pré-rendra (générera du HTML) cette page au moment de la construction, et les résultats de getStaticProps sont également enregistrés dans un fichier JSON. Le fichier JSON est ensuite transmis au composant HomePage en tant qu’accessoires au moment de l’exécution et utilisé pour les transitions de page côté client (routage via suivant/lien ou suivant/routeur).
La getStaticProps fonction reçoit également le context paramètre, qui est un objet contenant des clés. Une clé importante est la params objet — il contient les paramètres de route pour les pages utilisant des routes dynamiques. Nous allons voir comment utiliser le params objet dans la section suivante.
Génération statique avec des données et des chemins dynamiques
Si nous voulons pré-rendre des pages avec des itinéraires dynamiques, nous devons d’abord définir une liste de chemins possibles vers ces pages afin que Next.js puisse les pré-rendre au moment de la construction. Pour ce faire, nous devons exporter une autre fonction appelée getStaticPaths avec le composant de page dynamique et demandez à getStaticPaths de définir et de renvoyer tous les chemins possibles (ids) pour les pages individuelles que nous voulons pré-rendre en HTML au moment de la construction. La getStaticPaths La fonction définit les chemins pour les routes dynamiques et indique à Next.js pour quelles routes pré-rendre les pages.
export default function PostDetailPage(props) {...}
export async function getStaticPaths() {
const res = await fetch("...");
const posts = await res.json();
const paths = posts.map((post) => ({
params: { id: post.id },
}));
return { paths, fallback: true };
}
export async function getStaticProps({ params }) {
const res = await fetch(`.../${params.id}`);
const post = await res.json();
return {
props: {
post,
},
};
}
Dans l’exemple ci-dessus, nous voulons que notre page de publication individuelle soit statique, nous générons donc les pages à l’avance (temps de construction). Étant donné que ces pages ont des itinéraires dynamiques, nous devons récupérer les données où qu’elles se trouvent (base de données, API), puis créer des chemins pour les pages.
Pour y parvenir, nous utilisons le getStaticPaths fonction pour récupérer les données, puis générer des chemins pour notre URL dynamique. getStaticPaths retourne un objet avec paths dessus, et paths est un tableau contenant params pour chaque URL dynamique qui doit être générée statiquement. Dans notre cas, params sera le id pour chaque URL dynamique.
Nous passons le params s’opposer à la getStaticProps fonction, et il va nous donner accès au poste id pour récupérer les données de chaque page à rendre en HTML au moment de la construction. Comme il s’agit d’une URL dynamique, nous devons utiliser à la fois getStaticPaths et getStaticPropsmais s’il ne s’agit pas d’une URL dynamique, nous n’utiliserons que getStaticProps.
La getStaticPaths la fonction renvoie également un booléen fallback clé dont nous avons défini la valeur true. Dans le getStaticPaths fonction, vous avez la possibilité de générer les chemins de certaines pages (importantes ou les plus récentes) au moment de la construction et de différer la génération du reste au moment de la demande. Cela signifie que lorsqu’un utilisateur demande une page dont le chemin n’a pas été pré-généré, au moment de l’exécution, il sera généré immédiatement pour cet utilisateur et pré-rendu. Si nous modifions la valeur de fallback à false, une page 404 sera générée à la place pour les pages dont les chemins n’ont pas été pré-générés au moment de la construction. Si vous avez quelques chemins de pré-rendu et que de nouvelles pages ne sont pas ajoutées souvent, vous pouvez définir la valeur de fallback à false.
Rendu côté serveur (SSR)
Supposons que vous ayez des pages que vous souhaitez pré-afficher, dont les données doivent être mises à jour fréquemment, ou peut-être qu’elles dépendent des données côté client, vous avez donc besoin des données au moment de la demande. Vous pouvez utiliser le getServerSideProps fonction.
export default function PostDetailPage(props) {}
export async function getServerSideProps(context) {
const res = await fetch("...");
const post = await res.json();
return {
props: {
post,
},
};
}
La getServerSideProps fonction est similaire à la getStaticProps fonction. La différence est que, contrairement à getStaticPropsqui génère les pages une seule fois au moment de la construction, getServerSideProps ne génère pas de pages à l’avance. Chaque fois qu’un utilisateur demande une page, getServerSideProps est appelé. Par conséquent, c’est un bon endroit pour mettre des données dynamiques que vous n’avez pas besoin de générer à l’avance, comme le tableau de bord d’un utilisateur. Avec le rendu côté serveur, les temps de construction sont plus rapides car vous n’aurez pas à pré-rendre les pages.
Régénération statique incrémentielle (ISR)
ISR est une solution qui combine la puissance du SSG et du SSR. Cette méthode vous permet de créer ou de mettre à jour vos pages de manière statique sur une base par page, éliminant ainsi le besoin d’une reconstruction complète de l’application. Avec ISR, les pages statiques sont construites lorsqu’un utilisateur les demande et non au moment de la construction.
ISR utilise le getStaticProps fonction pour construire des pages statiques. Tout ce que vous avez à faire est d’ajouter le revalidate propriété à votre getStaticProps l’instruction return de la fonction et lui transmettez un nombre. Cette valeur (en secondes) définit la durée après laquelle Next.js revalide une page.
export default function PostDetailPage(props) {...}
export async function getStaticPaths() {
const res = await fetch("...");
const posts = await res.json();
const paths = posts.map((post) => ({
params: { id: post.id },
}));
return { paths, fallback: "true" };
}
export async function getStaticProps({ params }) {
const res = await fetch(`.../${params.id}`);
const post = await res.json();
return {
props: {
post,
},
revalidate: 5
};
}
Pour activer ISR, nous devons encore utiliser le getStaticProps fonction et inclure la propriété revalidate. Cette propriété est l’une des clés facultatives contenues dans le context paramètre. Il s’agit d’un laps de temps après lequel Next.js tente de régénérer une page. Il est par défaut à false sur les pages générées statiquement, ce qui signifie que la page sera mise en cache telle que construite jusqu’à votre prochaine construction. Dans l’extrait de code ci-dessus, nous générons les chemins vers quelques pages au moment de la construction. Lorsqu’un utilisateur demande une page qui a été pré-rendue au moment de la génération, l’utilisateur reçoit la page initialement mise en cache.
Parce que nous fixons la valeur de notre revalidate propriété sur 5, toute demande à cette même page avant le délai de cinq secondes affichera également la page en cache, mais Next.js lancera une régénération de cette page en arrière-plan. Next.js invalidera la page mise en cache lorsque la régénération sera terminée et affichera la page de publication mise à jour. Cependant, si la revalidation échoue, la page mise en cache restera inchangée.
Si une demande est faite à un chemin qui n’a pas été pré-généré au moment de la construction, Next.js générera automatiquement le chemin pour cette page et le mettra en cache. La page sera disponible comme si elle faisait partie de la première version, et les requêtes suivantes vers cette page seront servies à partir du cache. Lorsqu’un visiteur de notre site tente d’accéder aux détails de ce même personnage, il sera fourni à partir du cache.
La
getStaticProps,getStaticPathsetgetServerSidePropsles fonctions ne seront exécutées que côté serveur et jamais côté client (navigateur). Parce qu’il n’est pas inclus dans le bundle JavaScript du navigateur, vous pouvez faire tout ce que vous faites sur le serveur (lire le système de fichiers) à l’intérieur de ces fonctions.
Conclusion
Next.js vous offre la possibilité de rendre différentes pages dans votre application en utilisant les différents modes de rendu dont nous avons parlé ci-dessus. Tout dépend de la fonction que vous exportez pour récupérer les données. Depuis la version 9.3, Next.js a considérablement amélioré la façon dont nous récupérons les données tout en offrant une expérience de développement fantastique, et il a plusieurs fonctionnalités optimisées pour le référencement intégrées dans son cadre.
Source link