Validering av innehåll i NextJS-ramverket

I tidigare lektioner har vi försökt skapa två typer av komponenter - server och klient. Låt oss se till att SEO-problemet är löst i serverkomponenter. Det vill säga vi måste kontrollera att webbläsaren får HTML-koden med texten från vår komponent. Låt oss göra det.

Låt vår serverkomponent ha följande utseende:

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

Öppna sidan med denna komponent i webbläsaren. Tryck sedan på Ctrl + U. Denna tangentkombination kommer att öppna den ursprungliga HTML-koden för sidan. Detta är koden som kommer från servern. Det vill säga före tillämpning av webbläsarens JavaScript. Det är så här sökmotorerna ser vår sida. Så, öppna källkoden och studera den. Där hittar du texten från vår komponent.

Låt oss som ett exempel nu skapa en klientkomponent:

'use client';

import { useState } from 'react';

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

Tryck igen på Ctrl + U och studera källkoden. Du kommer inte att hitta texten från vår komponent, eftersom dess text bildas dynamiskt i webbläsaren.

Det är i detta som den huvudsakliga skillnaden mellan server- och klientkomponenter visar sig.

Utför manipulationerna som beskrivs i lektionen.

Berätta vad skillnaden är mellan server- och klientkomponenter ur SEO-synvinkel.

Förutom SEO, vilka andra skillnader har klient- och serverkomponenter?