Провера садржаја у фрејмворку 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 и проучите изворни код. Нећете наћи текст наше компоненте, јер њен текст формира динамично у бравзеру.

У томе се огледа основна разлика између серверских и клијентских компоненти.