Kontrola obsahu ve frameworku NextJS

V předchozích lekcích jsme zkusili vytvořit dva typy komponent - serverové a klientské. Přesvědčme se o tom, že v serverových komponentách je vyřešen problém s SEO. To znamená, že musíme ověřit, že do prohlížeče přichází HTML kód s textem naší komponenty. Pojďme na to.

Nechť naše serverová komponenta má následující podobu:

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

Otevřete stránku s touto komponentou v prohlížeči. Poté stiskněte Ctrl + U. Tato kombinace kláves otevře zdrojový HTML kód stránky. To je kód, který přichází ze serveru. To znamená před aplikací browserového JavaScriptu. Přesně tak naši stránku vidí vyhledávače. Otevřete tedy zdrojový kód a prostudujte jej. Naleznete tam text naší komponenty.

Pro příklad si nyní vytvořme klientskou komponentu:

'use client';

import { useState } from 'react';

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

Znovu stiskněte Ctrl + U a prostudujte zdrojový kód. Text naší komponenty nenajdete, protože její text je dynamicky vytvářen v prohlížeči.

V tom se projevuje hlavní rozdíl mezi serverovými a klientskými komponentami.

Proveďte manipulace popsané v lekci.

Vysvětlete, v čem spočívá rozdíl mezi serverovými a klientskými komponentami z hlediska SEO.

Kromě SEO, jaké další rozdíly mají klientské a serverové komponenty?