Des lecteurs comme vous aident à soutenir MUO. Lorsque vous effectuez un achat en utilisant des liens sur notre site, nous pouvons gagner une commission d'affiliation.
Le rendu est le processus de conversion du code React en HTML. La méthode de rendu que vous choisissez dépend des données avec lesquelles vous travaillez et de l'importance que vous accordez aux performances.
Dans Next.js, le rendu est très polyvalent. Vous pouvez rendre les pages côté client ou côté serveur, de manière statique ou incrémentielle.
Jetez un œil au fonctionnement de ces méthodes et à la performance de chacune.
Rendu côté serveur
Avec le rendu côté serveur (SSR), lorsqu'un utilisateur visite une page Web, le navigateur envoie une demande au serveur pour cette page. Le serveur récupère les données nécessaires de la base de données, si nécessaire, et les envoie avec le contenu de la page au navigateur. Le navigateur l'affiche alors à l'utilisateur.
Le navigateur fait cette demande pour chaque lien sur lequel l'utilisateur clique, ce qui signifie que le serveur traite la demande à chaque fois.
Cela peut réduire les performances du site Web. Cependant, le rendu côté serveur est parfait pour les pages qui consomment des données dynamiques.
Utilisez getServerSideProps pour reconstruire la page chaque fois qu'un utilisateur la demande.
exporterdéfautfonctionMaison({ données }) {
retour (
<principal>
// Utiliserdonnées
</main>
);
}exporterasynchronefonctiongetServerSideProps() {
// Récupérer les données de l'API externe
constante res = attendre récupérer('https://.../data')
constante données = attendre res.json()
// Sera transmis au composant de page en tant que props
retour { accessoires: { données } }
}
getServerSideProps ne s'exécute que sur le serveur et voici comment il s'exécute :
- Lorsqu'un utilisateur accède directement à la page, celle-ci s'exécute au moment de la demande et la page est pré-affichée avec les accessoires qu'elle renvoie.
- Lorsqu'un utilisateur accède à la page via un lien Suivant, le navigateur envoie une requête au serveur qui l'exécute.
Dans la nouvelle version, vous pouvez opter pour le rendu côté serveur à l'aide de récupérations de données dynamiques dans une page ou une mise en page.
Les extractions de données dynamiques sont des requêtes fetch() qui désactivent spécifiquement la mise en cache en définissant l'option de cache sur "no-store".
aller chercher('https://...', {cache: 'pas de magasin' });
Vous pouvez également définir revalidate sur 0 :
aller chercher('https://...', { suivant: { revalider: 0 } } );
Cette fonctionnalité est actuellement en version bêta, alors gardez cela à l'esprit. Vous pouvez en savoir plus sur les récupérations de données dynamiques dans le Next.js 13 documents bêta.
Rendu côté client
Vous devez utiliser le rendu côté client (CSR) lorsque vous devez fréquemment mettre à jour les données ou lorsque vous ne souhaitez pas pré-rendre votre page. Vous pouvez implémenter la RSE au niveau de la page ou du composant. Au niveau de la page, Next.js récupère les données au moment de l'exécution et une fois terminé au niveau du composant, il récupère les données au montage. Pour cette raison, la RSE peut contribuer à ralentir les performances.
Utilisez le crochet useEffect() pour rendre les pages sur le client comme ceci :
importer { useState, useEffect } depuis 'réagir'
fonctionMaison() {
constante [données, setData] = useState(nul)
constante [isLoading, setLoading] = useState(FAUX)useEffet(() => {
setChargement(vrai)aller chercher('/api/get-data')
.then((res) => res.json())
.then((données) => {
setData (données)
setChargement(FAUX)
})
}, [])si (isLoading) retour <p>Chargement...</p>
si (!données) retour <p>Pas de données</p>
retour (
<div>
// Utiliserdonnées
</div>
)
}
Vous pouvez également utiliser le crochet SWR. Il met les données en cache et les revalide au cas où elles deviendraient obsolètes.
importer utiliserSWR depuis 'swr'
récupérateur const = (...args) => récupérer(...args).then((res) => res.json())
fonctionMaison() {
constante { données, erreur } = useSWR('/api/données', récupérateur)
si (erreur) retour <div>Échec du chargement</div>
si (!données) retour <div>Chargement...</div>
retour (
<div>
// Utiliserdonnées
</div>
)
}
Dans Next.js 13, vous devez utiliser un composant client en ajoutant la directive "use client" en haut du fichier.
"utiliserclient";
exporterdéfaut () => {
retour (
<div>
// Composant client
</div>
);
};
La différence entre SSR et CSR est que les données sont extraites à chaque demande de page sur le serveur dans SSR tandis que les données sont extraites côté client dans CSR.
Génération de sites statiques
Avec la génération de sites statiques (SSG), la page récupère les données une fois pendant la construction. Les pages générées statiques sont très rapides et performantes car toutes les pages sont construites à l'avance. SSG est donc parfait pour les pages qui utilisent du contenu statique comme les pages de vente ou les blogs.
Dans Next.js, vous devez exporter la fonction getStaticProps dans la page que vous souhaitez afficher de manière statique.
exporterdéfautfonctionMaison({ données }) {
retour (
<principal>
// Utiliserdonnées
</main>
);
}exporterasynchronefonctiongetStaticProps() {
// Récupérer les données de l'API externe au moment de la construction
constante res = attendre récupérer('https://.../data')
constante données = attendre res.json()
// Sera transmis au composant de page en tant que props
retour { accessoires: { données } }
}
Vous pouvez également interroger la base de données dans getStaticProps.
exporterasynchronefonctiongetStaticProps() {
// Appelfonctionpouraller chercherdonnéesdepuisbase de données
constante données = attendre getDataFromDB()
retour { accessoires: { données } }
}
Dans Next.js 13, le rendu statique est la valeur par défaut, et le contenu est récupéré et mis en cache, sauf si vous désactivez l'option de mise en cache.
asynchronefonctiongetData() {
constante res = attendre récupérer('https://.../data');
retour res.json();
}
exporterdéfautasynchronefonctionMaison() {
constante données = attendre getData();
retour (
<principal>
// Utiliserdonnées
</main>
);
}
En savoir plus sur rendu statique dans Next.js 13 de la doc.
Génération incrémentielle-statique
Il y a des moments où vous souhaitez utiliser SSG mais souhaitez également mettre à jour le contenu régulièrement. C'est là que la génération statique incrémentielle (ISG) aide.
ISG vous permet de créer ou de mettre à jour des pages statiques après les avoir construites après l'intervalle de temps que vous spécifiez. De cette façon, vous n'avez pas besoin de reconstruire l'intégralité du site uniquement les pages qui en ont besoin.
ISG conserve les avantages de SSG avec l'avantage supplémentaire de fournir un contenu à jour aux utilisateurs. ISG est parfait pour les pages de votre site qui consomment des données changeantes. Par exemple, vous pouvez utiliser ISR pour rendre les articles de blog de sorte que le blog reste à jour lorsque vous modifiez des articles ou en ajoutez de nouveaux.
Pour utiliser ISR, ajoutez la prop revalidate à la fonction getStaticProps sur une page.
exporterasynchronefonctiongetStaticProps() {
constante res = attendre récupérer('https://.../data')
constante données = attendre res.json()
retour {
accessoires: {
données,
},
revalider: 60
}
}
Ici, Next.js essaiera de reconstruire la page lorsqu'une requête arrive après 60 secondes. La prochaine demande se traduira par une réponse avec la page mise à jour.
Dans Next.js 13, utilisez revalidate dans fetch comme ceci :
aller chercher('https://.../data', { suivant: { revalider: 60 } } );
Vous pouvez définir l'intervalle de temps sur ce qui fonctionne le mieux avec vos données.
Comment choisir une méthode de rendu
Jusqu'à présent, vous avez découvert les quatre méthodes de rendu dans Next.js - CSR, SSR, SSG et ISG. Chacune de ces méthodes est adaptée à différentes situations. La RSE est utile pour les pages qui ont besoin de données fraîches, où un référencement fort n'est pas un problème. Le SSR est également idéal pour les pages qui consomment des données dynamiques, mais il est plus convivial pour le référencement.
SSG convient aux pages dont les données sont principalement statiques, tandis que ISG convient mieux aux pages contenant des données que vous souhaitez mettre à jour à intervalles réguliers. SSG et ISG sont excellents en termes de performances et de référencement, car les données sont pré-extraites et vous pouvez les mettre en cache.
