NextJS фреймворкида контентни текшириш

Олдинги дарсларда биз икки турдаги компонентларни ясаб кўрдик - сервер ва клиент компонентлари. Келинг, сервер компонентларида SEO билан боглик муаммо ҳал қилинганлигига ишонч ҳосил қилайлик. Яъни биз компонентимиз матни билан бирга браузерга верстка келишини текширишимиз керак. Буни бажарамиз.

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

export default function Test() {
	let name = 'user';
	return <h1>hello, {name}!</h1>;
}

Бу компонент билан саҳифани браузерда очинг. Сўнгра Ctrl + U босинг. Бу босмалар бирлиги саҳифанинг HTML манба кодини очиб беради. Бу сервердан келган коддир. Яъни унинг устида браузер JavaScript-и ишлатилишидан олдинги ҳолати. Худди шу тарзда излаш тизимлари бизнинг саҳифамизни кўради. Шунинг учун, манба кодни очиб ўрганинг. У ерда сиз бизнинг компонентимиз матнини топа оласиз.

Мисол учун энди клиент компонентини ясаймиз:

'use client';

import { useState } from 'react';

export default function Test() {
	let [name, setName] = useState('user');
	return <h1>hello, {name}!</h1>;
}

Яна Ctrl + U босиб манба кодини ўрганинг. Сиз бизнинг компонентимиз матнини топа олмассиз, чунки унинг матни браузерда динамик равишда шаклланади.

Мана шу сервер ва клиент компонентлари орасидаги асосий фарқни намoйон қилади.

Дарсда тавсифланган амалларни бажариб кўринг.

Сервер ва клиент компонентлари орасидаги фарқ SEO нуқтаи назаридан нимада?

SEO дан ташқари, клиент ва сервер компонентларида яна қандай фарқлар мавжуд?