NextJS Framework'ida Kontentni Tekshirish

Oldingi darslarda biz ikki turdagi komponentlarni - server va klient komponentlarini yaratishga harakat qildik. Keling, server komponentlarida SEO bilan bog'liq muammo yechilganligiga ishonch hosil qilaylik. Ya'ni brauzerga bizning komponentimiz matni bilan tayyor HTML kelayotganligini tekshirishimiz kerak. Buni amalga oshiramiz.

Bizning server komponentimiz quyidagi ko'rinishga ega bo'lsin:

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

Ushbu komponent sahifasini brauzerda oching. Keyin Ctrl + U tugmalarini bosing. Bu klavishlar kombinatsiyasi sahifaning asl HTML kodini ochadi. Bu serverdan kelayotgan kod. Ya'ni brauzer JavaScript qo'llanilishidan oldin. Qidiruv tizimlari bizning sahifamizni aynan shunday ko'radi. Shunday qilib, asl kodni oching va uni o'rganing. U erda siz bizning komponent matnini topasiz.

Keling, endi misol uchun klient komponentini yaratamiz:

'use client';

import { useState } from 'react';

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

Yana Ctrl + U tugmalarini bosing va asl kodni o'rganing. Siz bizning komponent matnini topolmaysiz, chunki uning matni brauzerda dinamik ravishda shakllanadi.

Server va klient komponentlari o'rtasidagi asosiy farq shunda namoyon bo'ladi.

Darsda tavsiflangan amallarni bajaring.

Server va klient komponentlari o'rtasidagi farqni SEO nuqtai nazaridan tushuntiring.

SEO dan tashqari, klient va server komponentlari qanday boshqa farqlarga ega?