Kontrola obsahu v frameworku NextJS

V predchádzajúcich lekciách sme skúsili vytvoriť dva typy komponentov - serverové a klientske. Presvedčme sa o tom, že v serverových komponentoch je vyriešený problém s SEO. To znamená, že musíme overiť, že do prehliadača prichádza HTML kód s textom našej komponenty. Urobme to.

Nech naša serverová komponenta má nasledujúci vzhľad:

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

Otvorte stránku s touto komponentou v prehliadači. Potom stlačte Ctrl + U. Táto kombinácia klávesov otvorí zdrojový HTML kód stránky. To je kód, ktorý prichádza zo servera. To znamená pred aplikovaním prehliadačového JavaScriptu. Presne tak vidia našu stránku vyhľadávače. Takže, otvorte zdrojový kód a preskúmajte ho. Nájdete tam text našej komponenty.

Pre príklad si teraz vytvorme klientsku komponentu:

'use client';

import { useState } from 'react';

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

Znovu stlačte Ctrl + U a preskúmajte zdrojový kód. Nenájdete text našej komponenty, pretože jej text sa vytvára dynamicky v prehliadači.

V tom sa prejavuje hlavný rozdiel medzi serverovými a klientskymi komponentami.

Vykonajte manipulácie opísané v lekcii.

Vysvetlite, v čom je rozdiel medzi serverovými a klientskymi komponentami z pohľadu SEO.

Okrem SEO, aké ďalšie rozdiely majú klientske a serverové komponenty?