Kontentin NextJS Freymvorkunda Yoxlanilmasi

Evvelki derslerde iki nov komponent yaratmaga calisdig - server ve client komponentleri. Gelin emin edek ki, server komponentlerinde SEO problemi hell edilib. Yeni yoxlamalıyıq ki, brauzere komponentimizin metni ile birlikde HTML kodu gelir. Bunu edek.

Guman edek ki, server komponentimiz asagidaki formada olacaq:

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

Bu komponentin oldugu sehifeni brauzerde acin. Sonra Ctrl + U basin. Bu klaviatura birləşməsi sehifenin original HTML kodunu acacaq. Bu serverden gelen koddur. Yeni brauzerin JavaScript-ini tetbiq etmeden evvelki halı. Axtaris sistemleri sehifemizi belə gorur. Yeni, original kodu acin ve onu oxuyun. Orada komponentimizin metnini tapa bilərsiniz.

Gelin misal ucun indi bir client komponenti yaradaq:

'use client';

import { useState } from 'react';

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

Yeniden Ctrl + U basin ve original kodu oxuyun. Komponentimizin metnini tapa bilmeyeceksiniz, cunki onun metni brauzerde dinamik olaraq yaranir.

Server ve client komponentleri arasindaki esas ferq burada ozunu gosterir.

Derste gosterilen manipulyasiyalari yerine yetirin.

Server ve client komponentleri arasindaki ferqi SEO baximindan izah edin.

SEO-dan basqa, client ve server komponentlerinin hansi basqa ferqleri var?