Tartalom ellenőrzése a NextJS keretrendszerben

Az előző leckékben megpróbáltunk két típusú komponenst készíteni - szerver oldalit és kliens oldalit. Győződjünk meg arról, hogy a szerver oldali komponensekben megoldódott az SEO probléma. Vagyis ellenőriznünk kell, hogy a böngészőbe megérkezik-e a komponensünk szövegével ellátott HTML. Tegyük ezt meg.

Tegyük fel, hogy a szerver oldali komponensünk a következő formájú:

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

Nyissa meg a böngészőben az oldalt ezzel a komponenssel. Ezután nyomja meg a Ctrl + U billentyűkombinációt. Ez a kombináció megnyitja az oldal forrás HTML kódját. Ez az a kód, amely a szerverről érkezik. Vagyis mielőtt a böngészeres JavaScript hozzáférne. Így látják az oldalunkat a keresőmotorok. Szóval, nyissa meg a forráskódot és tanulmányozza. Meg fogja találni benne a komponensünk szövegét.

Vegyünk most példaként egy kliens oldali komponenst:

'use client';

import { useState } from 'react';

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

Ismét nyomja meg a Ctrl + U billentyűkombinációt és tanulmányozza a forráskódot. Nem fogja megtalálni a komponensünk szövegét, mivel a szövege dinamikusan jön létre a böngészőben.

Ebben nyilvánul meg a fő különbség a szerver oldali és a kliens oldali komponensek között.

Végezze el a leckében leírt manipulációkat.

Meséljen arról, mi a különbség a szerver oldali és a kliens oldali komponensek között az SEO szempontjából.

Az SEO-n kívül milyen egyéb különbségek vannak a kliens és a szerver oldali komponensek között?