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ć:

src/app/test/page.jsxexport 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:

src/app/test/page.jsx'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.