Verifica del contenuto nel framework NextJS

Nelle lezioni precedenti abbiamo provato a creare due tipi di componenti - server e client. Assicuriamoci che nei componenti server il problema SEO sia risolto. Cioè dobbiamo verificare che nel browser arrivi il markup con il testo del nostro componente. Facciamolo.

Supponiamo che il nostro componente server abbia la seguente forma:

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

Apri la pagina con questo componente nel browser. Quindi premi Ctrl + U. Questa combinazione di tasti aprirà il codice HTML sorgente della pagina. Questo è il codice che arriva dal server. Cioè prima dell'applicazione del JavaScript del browser. È così che i motori di ricerca vedono la nostra pagina. Quindi, apri il codice sorgente e esaminalo. Lì troverai il testo del nostro componente.

Per esempio, creiamo ora un componente client:

'use client';

import { useState } from 'react';

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

Premi di nuovo Ctrl + U ed esamina il codice sorgente. Non troverai il testo del nostro componente, poiché il suo testo viene generato dinamicamente nel browser.

In questo si manifesta la differenza principale tra componenti server e componenti client.

Esegui le manipolazioni descritte nella lezione.

Spiega qual è la differenza tra componenti server e componenti client dal punto di vista SEO.

Oltre al SEO, quali altre differenze hanno i componenti client e server?