Тафтиши матн дар чаҳорчӯби NextJS

Дар дарсҳои гузашта мо кӯшиш кардем ду намуди компонентҳо созем - серверӣ ва клиентӣ. Биёед боварӣ ҳосил кунем, ки дар компонентҳои серверӣ мушкилии SEO ҳал шудааст. Яъне мо бояд тафтиш кунем, ки ба браузер верстаи компоненти мо бо матн меояд. Биёед ин корро кунем.

Бигзор компоненти серверии мо соҳиби намуди зерин бошад:

src/app/test/page.jsxexport default function Test() {
  let name = 'корбар';
  return <h1>Салом, {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('корбар');
  return <h1>Салом, {name}!</h1>;
}

Боз тугмаи Ctrl + U-ро пахш кунед ва коди аслиро омӯзед. Шуно матни компоненти худро нахоҳед ёфт, зеро матни он дар браузер динамикӣ ташкил меёбад.

Дар ин аст фарқияти асосии байни компонентҳои серверӣ ва клиентӣ.