Validering av innhold i NextJS-rammeverket

I tidligere leksjoner prøvde vi å lage to typer komponenter - serverkomponenter og klientkomponenter. La oss forsikre oss om at SEO-problemet er løst i serverkomponenter. Det vil si at vi må validere at nettleseren mottar HTML-kode med teksten fra vår komponent. La oss gjøre dette.

La vår serverkomponent ha følgende utseende:

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

Åpne siden med denne komponenten i nettleseren. Trykk deretter på Ctrl + U. Dette er en tastatursnarve som åpner kilde-HTML-koden til siden. Dette er koden som kommer fra serveren. Det vil si før påføring av nettleserens JavaScript. Slik ser søkemotorer siden vår. Så, åpne kildekoden og studer den. Der vil du finne teksten fra vår komponent.

La oss for eksempel nå lage en klientkomponent:

'use client';

import { useState } from 'react';

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

Trykk på Ctrl + U igjen og studer kildekoden. Du vil ikke finne teksten fra vår komponent, ettersom dens tekst dannes dynamisk i nettleseren.

Dette viser hovedforskjellen mellom serverkomponenter og klientkomponenter.

Utfør manipulasjonene beskrevet i leksjonen.

Forklar hva forskjellen er mellom serverkomponenter og klientkomponenter sett fra et SEO-perspektiv.

Foruten SEO, hvilke andre forskjeller har klientkomponenter og serverkomponenter?