Vérification du contenu dans le framework NextJS

Dans les leçons précédentes, nous avons essayé de créer deux types de composants - serveur et client. Assurons-nous que le problème de référencement (SEO) est résolu dans les composants serveur. C'est-à-dire que nous devons vérifier que le navigateur reçoit le balisage avec le texte de notre composant. Faisons cela.

Supposons que notre composant serveur ait la forme suivante :

export default function Test() {
	let name = 'user';
	return <h1>hello, {name}!</h1>;
}

Ouvrez la page avec ce composant dans le navigateur. Ensuite, appuyez sur Ctrl + U. Cette combinaison de touches ouvrira le code source HTML de la page. C'est le code qui provient du serveur. C'est-à-dire avant l'application du JavaScript par le navigateur. C'est ainsi que les moteurs de recherche voient notre page. Alors, ouvrez le code source et étudiez-le. Vous y trouverez le texte de notre composant.

Prenons maintenant l'exemple d'un composant client :

'use client';

import { useState } from 'react';

export default function Test() {
	let [name, setName] = useState('user');
	return <h1>hello, {name}!</h1>;
}

Appuyez à nouveau sur Ctrl + U et étudiez le code source. Vous ne trouverez pas le texte de notre composant, car son texte est généré dynamiquement dans le navigateur.

C'est en cela que se manifeste la principale différence entre les composants serveur et client.

Effectuez les manipulations décrites dans la leçon.

Expliquez la différence entre les composants serveur et les composants client du point de vue du référencement (SEO).

Au-delà du référencement (SEO), quelles autres différences existent entre les composants client et serveur ?