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 басып, бастапқы кодты зерттеңіз. Сіз біздің компоненттің мәтінін таба алмайсыз, себебі оның мәтіні браузерде динамикалық түрде құрастырылады.

Серверлік және клиенттік компоненттер арасындағы негізгі айырмашылық осында көрінеді.