Rendu côté serveur vs génération de site statique dans Next.js

NextJs est un framework pour créer une application full-stack avec des fonctionnalités telles que le rendu côté serveur à l’aide du framework React. Aujourd’hui, il est devenu un cadre consolidé pour la création d’applications Web étonnantes.

Il peut y avoir de nombreux avantages de Next.js comme :

• Idéal pour le référencement.
• Optimisation des images – Next.js fournit son composant Image qui améliore les performances du site, et les images ne sont chargées que lorsqu’elles entrent dans la fenêtre d’affichage, avec des espaces réservés de flou optionnels.
• Routes API – création facile du point de terminaison API en tant que fonction sans serveur Node.js.
• Régénération statique incrémentielle – permet aux développeurs Web de mettre à jour les pages existantes en les restituant en arrière-plan à mesure que le trafic arrive. De cette façon, le contenu statique peut devenir dynamique.
• Prise en charge de TypeScript.

Outre toutes les fonctionnalités fantastiques que Next.js a à offrir, il y en a une en particulier qui est très puissante et étonnante : la possibilité d’utiliser différentes techniques de pré-rendu. Ces techniques sont le rendu côté serveur, la génération de site statique et la régénération statique incrémentielle.

Plongeons maintenant dans les détails des deux techniques de rendu parmi les plus couramment utilisées.

Rendu côté serveur

Le rendu côté serveur (SSR) est l’endroit où le serveur envoie une page HTML prête à être rendue et les scripts JS nécessaires pour rendre la page interactive. La page HTML est rendue instantanément avec tous les éléments statiques. Lors du rendu, le navigateur télécharge et exécute le code JS après quoi la page HTML devient interactive. Désormais, les interactions sur cette page seront gérées par le navigateur côté client. Pour toute nouvelle donnée, le navigateur enverra une requête au serveur via des API, et seules les nouvelles informations requises seront récupérées.

Quand utiliser le rendu côté serveur ?

Le SSR est proposé pour les applications dans lesquelles nous devons pré-rendre des données couramment mises à jour à partir de sources externes. Cette technique est exceptionnellement préconisée lorsque les données ne peuvent pas être générées de manière statique avant qu’une demande d’utilisateur n’ait lieu et tant qu’elles sont censées être disponibles pour les moteurs de recherche. Une application rendue côté serveur permet aux pages de se charger plus rapidement, améliorant ainsi l’expérience utilisateur. Lors du rendu côté serveur, les moteurs de recherche peuvent facilement indexer et explorer le contenu, car le contenu peut être rendu avant le chargement de la page, ce qui est idéal pour le référencement.

Méthode pour implémenter le rendu côté serveur

Si vous exportez une fonction appelée getServerSideProps à partir d’une page, Next.js pré-rendra cette page à chaque requête en utilisant les données renvoyées par getServerSideProps.
Noter:- getServerSideProps ne s’exécute que côté serveur et ne s’exécute jamais sur le navigateur.

Il peut y avoir deux situations où cette méthode peut être utilisée –

1. Premièrement, il s’exécutera au moment de la demande et la page sera pré-rendue avec les accessoires renvoyés, lorsque nous demanderons la page directement.
2. Deuxièmement, Next.js enverra une requête API au serveur, qui s’exécute getServerSidePropslorsque nous demandons la page sur les transitions de page côté client via suivant/lien ou suivant/routeur.

Exemple utilisant getServerSideProps

Génération de sites statiques

La génération de site statique décrit le processus de compilation et de rendu d’un site Web au moment de la construction. La sortie est un cluster de fichiers statiques, y compris les fichiers HTML, JavaScript et CSS.
Lors de l’utilisation de SSG avec Next.js, la page est pré-rendue au moment de la compilation. Cela signifie que l’utilisateur n’aura pas à attendre que la page se charge dans le navigateur, la page sera simplement rendue.

Quand utiliser la génération de site statique ?

La génération de sites statiques est généralement utilisée dans des sites comme les blogs où le contenu n’est pas mis à jour très souvent. Le SSG peut être généré avant une demande de l’utilisateur. Cela signifie que les données seront disponibles au moment de la construction, ou nous pouvons dire – sur chaque page où vous souhaitez présenter du contenu statique.

Méthode pour implémenter la génération de site statique ?

Next.js pré-rend les pages en utilisant la génération statique, ce qui signifie qu’il ne récupère aucune donnée par défaut. Dans tous les cas, si nous devons générer une page contenant ce type de données, nous pouvons le faire de deux manières :

1. Si le contenu de la page dépend de données externes, utilisez getStaticProps méthode uniquement.
2. Si les chemins de page dépendent de données externes, utilisez la getStaticPaths méthode en plus de getStaticProps.

Exemple utilisant getStaticProps et getStaticPaths

Conclusion

Selon les besoins, nous pouvons choisir le mode de rendu que nous voulons implémenter. Supposons que nous travaillions sur des sites simples ou non complexes comme des blogs, donc dans ce scénario, nous pouvons utiliser SSG car le contenu est statique et ne change pas. Par conséquent, tous les fichiers seront stockés sur notre serveur au moment de la construction et, lorsque l’utilisateur le demandera, ils seront chargés en très peu de temps.
Maintenant, dans un autre scénario où le contenu est dynamique et les pages sont plus complexes comme dans un site de commerce électronique, nous pouvons utiliser SSR . Avec ces outils, la création d’applications Web riches est devenue plus facile et plus amusante.

TROUVÉ CELA UTILE ? PARTAGEZ-LE