Inhaltsprüfung im NextJS-Framework

In vorherigen Lektionen haben wir versucht, zwei Arten von Komponenten zu erstellen - Server- und Clientkomponenten. Lassen Sie uns sicherstellen, dass das SEO-Problem in Serverkomponenten gelöst ist. Das heißt, wir müssen überprüfen, dass das Markup mit dem Text unserer Komponente im Browser ankommt. Lassen Sie uns das tun.

Nehmen wir an, unsere Serverkomponente hat die folgende Form:

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

Öffnen Sie die Seite mit dieser Komponente im Browser. Drücken Sie dann Strg + U. Diese Tastenkombination öffnet den ursprünglichen HTML-Code der Seite. Dies ist der Code, der vom Server kommt. Das heißt, bevor der browserbasierte JavaScript darauf angewendet wird. So sehen Suchmaschinen unsere Seite. Öffnen Sie also den Quellcode und studieren Sie ihn. Dort finden Sie den Text unserer Komponente.

Lassen Sie uns nun als Beispiel eine Client- Komponente erstellen:

'use client';

import { useState } from 'react';

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

Drücken Sie wieder Strg + U und studieren Sie den Quellcode. Sie werden den Text unserer Komponente nicht finden, da sein Text dynamisch im Browser gebildet wird.

Hierin zeigt sich der Hauptunterschied zwischen Server- und Clientkomponenten.

Führen Sie die in der Lektion beschriebenen Manipulationen durch.

Erklären Sie, worin der Unterschied zwischen Server- und Clientkomponenten aus SEO-Sicht besteht.

Neben SEO, welche weiteren Unterschiede haben Client- und Serverkomponenten?