Preverjanje vsebine v ogrodju NextJS

V prejšnjih lekcijah smo poskusili narediti dve vrsti komponent - strežniške in odjemalske. Prepričajmo se, da je v strežniških komponentah rešena težava s SEO. To pomeni, da moramo preveriti, da v brskalnik pride razporeditev z besedilom naše komponente. Naredimo to.

Naj ima naša strežniška komponenta naslednjo obliko:

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

Odprite stran s to komponento v brskalniku. Nato pritisnite Ctrl + U. Ta kombinacija tipk bo odprla izvorno kodo HTML strani. To je koda, ki pride s strežnika. To je pred uporabo brskalniškega JavaScripta. Prav tako naše strani vidijo iskanja. Torej, odprite izvorno kodo in jo preučite. Tam boste našli besedilo naše komponente.

Za primer naredimo zdaj odjemalsko komponento:

'use client';

import { useState } from 'react';

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

Spet pritisnite Ctrl + U in preučite izvorno kodo. Ne boste našli besedila naše komponente, saj se njegovo besedilo oblikuje dinamično v brskalniku.

V tem se kaže glavna razlika med strežniškimi in odjemalskimi komponentami.

Izvedite manipulacije, opisane v lekciji.

Povejte, v čem je razlika med strežniškimi in odjemalskimi komponentami z vidika SEO.

Kakšne druge razlike poleg SEO imajo odjemalske in strežniške komponente?