Introduction à la navigation dans NextJS

Dans cette section du tutoriel, nous parlerons du fonctionnement des liens dans NextJS.

Pour commencer, discutons de ce qui est si spécial avec les liens. Examinons-les dans différentes approches de création de site web.

Site en React

Supposons que vous ayez un site en React. Comme on le sait, React représente un SPA - un site où l'utilisateur reste toujours sur une seule page. Vous pouvez connecter React Router et l'utilisateur pensera qu'il navigue sur différentes pages, tout en restant physiquement sur un seul fichier.

L'utilisateur cliquera sur des liens, il lui semblera qu'il arrive sur une autre page, mais la page du site dans le navigateur ne se rechargera pas - React formera dynamiquement ce que l'utilisateur voit à l'écran.

Dans un tel schéma, l'utilisateur reçoit la maquette du site lors de sa première visite sur la page, puis les parties du site changent simplement via JavaScript. En même temps, le site peut demander des données au serveur via AJAX.

Cette approche réduit la charge sur l'hébergement (dont les ressources coûtent notre argent), ainsi que la charge sur la connexion internet de l'utilisateur.

Mais cette approche a un inconvénient - le problème de référencement naturel (SEO). Bien que le site ait un ensemble de liens, et que la barre d'adresse change, et qu'on puisse même envoyer un lien vers une page spécifique du site via un messager. Cependant, le contenu de la page est formé dynamiquement sur le client et les moteurs de recherche ne sont pas capables de traiter cela. Par conséquent, un tel site ne sera pas promu.

Mais tous les sites ne sont pas destinés à être promus dans les moteurs de recherche. Et si le vôtre ne l'est pas, alors ce schéma est tout à fait viable pour vous.

Site avec backend

Supposons que votre site soit fait avec un des langages de backend. Par exemple, en PHP.

Dans ce cas, lorsque l'utilisateur cliquera sur des liens, la page du site sera chargée entièrement à chaque fois.

Le problème est qu'une partie substantielle de la page est déjà chez l'utilisateur. Car, comme vous le savez déjà, sur une page, généralement seul le contenu et les métadonnées changent, et tout le reste reste inchangé.

Pourquoi devrions-nous télécharger le reste, si seul le contenu a changé ? Cela crée une charge accrue sur le serveur et la connexion internet.

Il y a un autre problème. Supposons que sur la page que nous obtenons, dans le contenu se trouve une liste de produits, comme dans un magasin en ligne. De toute évidence, chaque produit a la même mise en page. Il serait plus optimal de télécharger uniquement les données des produits, et le template d'affichage du produit. Et ensuite, sur le client, afficher chaque produit dans ce template. Mais nous téléchargeons les produits avec la mise en page répétée du produit.

En résumé, si nous avons un site avec un backend pur, nous faisons transiter beaucoup de données inutiles sur le réseau.

Cependant, dans ce cas, nous n'avons pas de problème de SEO. Pour l'URL demandée, le contenu statique est toujours renvoyé, compréhensible pour les moteurs de recherche.

Site sur NextJS

NextJS combine les deux approches. Lorsque l'utilisateur saisit directement l'URL dans la barre d'adresse, il reçoit en réponse le contenu statique de la page.

Lorsque l'utilisateur commence à cliquer sur les liens de notre site, la page du site n'est pas actualisée entièrement, mais via AJAX, les données nécessaires à l'utilisateur sont chargées.

Lorsque le moteur de recherche parcourt notre site, il voit le contenu statique dont il a besoin. Et lorsque l'utilisateur parcourt notre site, notre site commence à se comporter comme un SPA.

Et, le plus important, NextJS réalise tout cela automatiquement ! Nous n'avons pas besoin de nous en soucier - il fera tout tout seul. Beauté !

Dans les prochaines leçons, nous verrons comment amener NextJS à fonctionner de la manière décrite.