Weryfikacja treści w frameworku NextJS

W poprzednich lekcjach spróbowaliśmy utworzyć dwa typy komponentów - serwerowe i klienckie. Sprawdźmy, że w komponentach serwerowych rozwiązano problem z SEO. Oznacza to, że musimy sprawdzić, czy do przeglądarki dociera kod HTML z tekstem naszego komponentu. Zróbmy to.

Załóżmy, że nasz komponent serwerowy ma następującą postać:

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

Otwórz stronę z tym komponentem w przeglądarce. Następnie naciśnij Ctrl + U. Ta kombinacja klawiszy otworzy źródłowy kod HTML strony. To jest kod, który przychodzi z serwera. Czyli przed zastosowaniem do niego JavaScriptu przeglądarki. Właśnie tak widzą naszą stronę wyszukiwarki. Otwórz źródłowy kod i przeanalizuj go. Znajdziesz tam tekst naszego komponentu.

Dla przykładu utwórzmy teraz komponent kliencki:

'use client';

import { useState } from 'react';

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

Ponownie naciśnij Ctrl + U i przeanalizuj kod źródłowy. Nie znajdziesz tekstu naszego komponentu, ponieważ jego tekst jest tworzony dynamicznie w przeglądarce.

Na tym właśnie przejawia się główna różnica między komponentami serwerowymi i klienckimi.

Wykonaj manipulacje opisane w lekcji.

Opowiedz, na czym polega różnica między komponentami serwerowymi i klienckimi z punktu widzenia SEO.

Poza SEO, jakie jeszcze różnice mają komponenty klienckie i serwerowe?