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

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

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

export default function Test() {
	let name = 'корбар';
	return <h1>Салом, {name}!</h1>;
}

Саҳифаи ин компонентро дар браузер кушоед. Сипас тугмаи Ctrl + U-ро пахш кунед. Ин комбинацияи клавишҳо рамзи HTML-и аслии саҳифаро мекушояд. Ин рамзест, ки аз сервер меояд. Яъне пеш аз татбиқи JavaScript-и браузер бар он. Ҳамин тавр системаҳои ҷустуҷӯ саҳифаи моро мебинанд. Пас, коди аслиро кушоед ва онро омӯзед. Дар он ҷо шумо матни компоненти худро хоҳед ёфт.

Барои намуна акнун биёед компоненти клиентиро созем:

'use client';

import { useState } from 'react';

export default function Test() {
	let [name, setName] = useState('корбар');
	return <h1>Салом, {name}!</h1>;
}

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

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

Манипулятсияҳои дар дарс тавсифшударо иҷро кунед.

Дар бораи он, ки аз назари SEO чӣ фарқият байни компонентҳои серверӣ ва клиентӣ мавҷуд аст, баҳс кунед.

Ғайр аз SEO, кадом фарқиятҳои дигар компонентҳои клиентӣ ва серверӣ доранд?