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 և ուսումնասիրեք սկզբնական կոդը: Դուք չեք գտնի մեր կոմպոնենտի տեքստը, քանի որ դրա տեքստը ձևավորվում է դինամիկ կերպով բրաուզերում:

Հենց այս պահին է և՛ արտահայտվում հիմնական տարբերությունը սերվերային և կլիենտական կոմպոնենտների միջև:

Կատարեք դասում նկարագրված մանիպուլյացիաները:

Պատմեք, թե ինչ տարբերություն կա սերվերային և կլիենտական կոմպոնենտների միջև SEO-ի տեսանկյունից:

Բացի SEO-ից, ի՞նչ այլ տարբերություններ ունեն կլիենտական և սերվերային կոմպոնենտները: