Afficher la source pour confirmer que SSR fonctionne dans Next.js

Comment vérifier si SSR fonctionne dans votre application Next.js

Avez-vous configuré votre nouvelle application Next.js? Génial!

Vérifions maintenant que l'application fonctionne comme nous nous attendons à ce qu'elle fonctionne. C'est une application Next.js, donc ça devrait êtrerendu côté serveur.

C'est l'un des principaux arguments de vente de Next.js: si nous créons un site à l'aide de Next.js, les pages du site sont rendues sur le serveur, qui fournit du HTML au navigateur.

Cela présente 3 avantages majeurs:

  • Le client n'a pas besoin d'instancier React pour le rendu, ce qui rend le site plus rapide pour vos utilisateurs.
  • Les moteurs de recherche indexeront les pages sans avoir besoin d'exécuter le JavaScript côté client. Quelque chose que Google a commencé à faire, mais a ouvertement admis être un processus plus lent (et vous devriez aider Google autant que possible, si vous voulez bien vous classer.
  • Vous pouvez avoir des balises méta sur les réseaux sociaux, utiles pour ajouter des images d'aperçu, personnaliser le titre et la description de n'importe laquelle de vos pages partagées sur Facebook, Twitter, etc.

Voyons la source de l'application. À l'aide de Chrome, vous pouvez cliquer avec le bouton droit n'importe où dans la page et appuyer surAfficher la source de la page.

Si vous affichez la source de la page, vous verrez le<div><h1>Airbnb clone</h1></div>extrait de code dans le HTMLbody, avec un tas de fichiers JavaScript - les bundles d'applications.

Nous n'avons pas besoin de configurer quoi que ce soit, SSR (rendu côté serveur) fonctionne déjà pour nous.

L'application React sera lancée sur le client et sera celle qui alimentera les interactions telles que cliquer sur un lien, en utilisant le rendu côté client. Mais recharger une page la rechargera à partir du serveur. Et en utilisant Next.js, il ne devrait y avoir aucune différence dans le résultat dans le navigateur - une page rendue par le serveur devrait ressembler exactement à une page rendue par le client.

Téléchargez mon gratuitManuel Next.js


Plus de prochains tutoriels: