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

У папярэдніх уроках мы паспрабавалі зрабіць два тыпы кампанентаў - серверныя і кліенцкія. Давайце пераканаемся ў тым, што ў серверных кампанентах вырашана праблема з SEO. Гэта значыць мы павінны праверыць, што ў браўзер прыходзіць верстка з тэкстам нашага кампанента. Зробім гэта.

Хай наш серверны кампанент мае наступны выгляд:

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

Адкрыйце старонку з гэтым кампанентам у браўзеры. Затым націсніце Ctrl + U. Гэта камбінацыя клавіш адкрые зыходны HTML код старонкі. Гэта той код, які прыходзіць з сервера. Гэта значыць да прымянення да яго браўзернага 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 і вывучыце зыходны код. Вы не знойдзеце тэксту нашага кампанента, так яго тэкст фармуецца дынамічна ў браўзеры.

У гэтым і праяўляецца асноўная розніца паміж сервернымі і кліенцкімі кампанентамі.