Maîtriser SSG dans Next.js : comment améliorer le référencement et l'expérience utilisateur

SSG (Static Site Generation) est une méthode dans Next.js qui est similaire à ISR (Incremental Static Regeneration), mais elle ne s'exécute qu'au moment de la construction. Une fois le site créé, SSG ne restitue plus les pages avant la prochaine version. Dans cet article, je vais expliquer comment SSG fonctionne dans Next.js, comment il améliore le référencement et comment il améliore l'expérience utilisateur.

Qu’est-ce que la SSG ?

SSG est une méthode dans Next.js qui s'exécute sur le serveur pendant le processus de construction. Il génère des pages statiques avec leurs ressources CSS, JavaScript et associées, regroupant le tout pour une expérience statique complète.

Comment fonctionne le SSG ?

Pour utiliser SSG dans votre projet, vous devez exporter la méthode getStaticProps dans la page où vous souhaitez utiliser SSG. Si vous utilisez le routeur d'application, SSG s'exécute par défaut lorsque vous créez votre projet. Cependant, si vous utilisez le routeur de pages, vous devez ajouter manuellement getStaticProps.

Cette méthode crée des pages statiques groupées, donc lorsqu'un utilisateur ou un robot demande une page sur laquelle SSG est implémenté, Next.js envoie une page entièrement préparée avec toutes ses ressources. Cela élimine le besoin de charger des ressources supplémentaires, minimisant ainsi les retards, ce qui est idéal pour le référencement et l'expérience utilisateur.

Pour les itinéraires dynamiques, comme une page de détail de blog qui utilise un slug ou un identifiant, vous aurez besoin d'une autre méthode pour récupérer les données de cette page. Cette méthode est getStaticPaths, qui s'exécute avant getStaticProps pendant la construction.

Comment implémenter SSG dans le routeur d'application

SSG est implémenté par défaut dans le routeur d'application Next.js lorsque vous créez votre projet. Toutes vos pages seront regroupées et mises en cache dans un CDN, il n'est donc pas nécessaire d'ajouter des étapes supplémentaires pour les routes statiques.

Cependant, pour les routes dynamiques, telles que celles utilisant des slugs ou des identifiants, Next.js ne peut pas les récupérer automatiquement au moment de la construction. Vous devrez obtenir ces listes à partir d'une API ou d'une autre source de votre projet. C'est là qu'intervient la fonction generateStaticParams. Elle vous permet de récupérer la liste des slugs ou des identifiants pour les routes dynamiques et de les renvoyer, afin que Next.js puisse générer des pages statiques pour chacun. La chose importante à retenir est que generateStaticParams doit être utilisé dans un composant serveur, pas dans un composant client.

c'est un exemple d'implémentation dans le fichier tsx :

c'est un exemple d'implémentation dans le fichier jsx :

Comment implémenter SSG dans le routeur de pages

Pour implémenter SSG dans le Page Router, vous devez créer la fonction getStaticProps et l'exporter à partir de la page où vous souhaitez implémenter SSG. Cette fonction sera appelée automatiquement lors de la construction du projet.

Si vous avez un itinéraire dynamique, vous devez créer une autre fonction et l'exporter. Cette fonction, comme je l'ai mentionné précédemment, est appelée avant getStaticProps, et vous devez récupérer vos données à partir d'une API ou obtenir une liste d'ID ou de slugs à partir d'un fichier.

c'est un exemple d'implémentation dans le fichier tsx :

c'est un exemple d'implémentation dans le fichier jsx :

Conclusion

SSG est une méthode utile pour regrouper et créer des pages statiques. Si vous souhaitez améliorer votre site Web pour le référencement et l'expérience utilisateur, il est conseillé d'utiliser SSG, ISR ou SSR.

Dans ce blog, j'ai écrit sur SSG. J'ai également un autre article sur l'ISR disponible à cette adresse : Mastering ISR in Next.js. J'écrirai un autre article sur la RSS plus tard. N'hésitez pas à laisser un commentaire si vous avez des questions ; Je suis là pour vous aider. Ce blog pourra être mis à jour ultérieurement car je souhaite partager les meilleures connaissances avec vous.

Merci d'avoir lu ! Si vous souhaitez lire plus d'articles, vous pouvez suivre mon site Web : Saeed Niyabati. J'espère que vous l'avez apprécié. Au revoir pour l'instant !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!