Validering af indhold i NextJS-framework

I de foregående lektioner prøvede vi at lave to typer komponenter - server og klient. Lad os sikre os, at SEO-problemet er løst i serverkomponenter. Det betyder, at vi skal kontrollere, at browseren modtager HTML-koden med tekst fra vores komponent. Lad os gøre det.

Lad vores serverkomponent have følgende udseende:

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

Åbn siden med denne komponent i browseren. Tryk derefter på Ctrl + U. Denne tastaturkombination vil åbne den oprindelige HTML-kode for siden. Det er den kode, der kommer fra serveren. Altså før browserens JavaScript anvendes på den. Det er sådan, søgemaskiner ser vores side. Så åbn den oprindelige kode og undersøg den. Der vil du finde teksten fra vores komponent.

Lad os som eksempel lave en klientkomponent nu:

'use client';

import { useState } from 'react';

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

Tryk igen på Ctrl + U og undersøg den oprindelige kode. Du vil ikke finde teksten fra vores komponent, da dens tekst dannes dynamisk i browseren.

Det er her hovedforskellen mellem server- og klientkomponenter viser sig.

Udfør de manipulationer, der er beskrevet i lektionen.

Forklar hvad forskellen er mellem server- og klientkomponenter set fra et SEO-perspektiv.

Udover SEO, hvilke andre forskelle har klient- og serverkomponenter?