Проверка контента в фреймворке NextJS

В предыдущих уроках мы попробовали сделать два типа компонентов - серверные и клиентские. Давайте убедимся в том, что в серверных компонентах решена проблема с SEO. To есть мы должны проверить, что в браузер приходит верстка с текстом нашего компонента. Сделаем это.

Пусть наш серверный компонент имеет следующий вид:

src/app/test/page.jsxexport default function Test() {
  let name = 'user';
  return <h1>hello, {name}!</h1>;
}

Откройте страницу с этим компонентом в браузере. Затем нажмите Ctrl + U. Это комбинация клавиш откроет исходный HTML код страницы. Это тот код, который приходит с сервера. To есть до применения к нему браузерного JavaScript. Именно так и видят нашу страницу поисковые системы. Итак, откройте исходный код и изучите его. Там вы найдете текст нашего компонента.

Давайте для примера теперь сделаем клиентский компонент:

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>;
}

Опять нажмите Ctrl + U и изучите исходный код. Вы не найдете текста нашего компонента, так его текст формируется динамически в браузере.

В этом и проявляется основная разница между серверными и клиентскими компонентами.