NextJS ֆրեյմվորքում կոնտենտի ստուգում

Նախորդ դասերում մենք փորձեցինք ստեղծել երկու տեսակի կոմպոնենտներ՝ սերվերային և կլիենտական: Եկեք համոզվենք, որ սերվերային կոմպոնենտներում լուծված է SEO-ի խնդիրը: Այսինքն, մենք պետք է ստուգենք, որ բրաուզեր է հասնում վերստը մեր կոմպոնենտի տեքստով: Եկեք դա անենք:

Ենթադրենք, մեր սերվերային կոմպոնենտը ունի հետևյալ տեսքը.

src/app/test/page.jsxexport default function Test() {
  let name = 'user';
  return <h1>hello, {name}!</h1>;
}

Բացեք այս կոմպոնենտով էջը բրաուզերում: Այնուհետև սեղմեք Ctrl + U: Ստեղների այս համադրությունը կբացի էջի HTML սկզբնական կոդը: Սա այն կոդն է, որը գալիս է սերվերից: Այսինքն՝ նախքան դրա վրա բրաուզերային JavaScript-ի կիրառումը: Հենց այսպես են մեր էջը տեսնում որոնման համակարգերը: Այսպիսով, բացեք սկզբնական կոդը և ուսումնասիրեք այն: Այնտեղ դուք կգտնեք մեր կոմպոնենտի տեքստը:

Օրինակի համար հիմա եկեք ստեղծենք կլիենտական կոմպոնենտ.

src/app/test/page.jsx'use client';

import { useState } from 'react';

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

Կրկին սեղմեք Ctrl + U և ուսումնասիրեք սկզբնական կոդը: Դուք չեք գտնի մեր կոմպոնենտի տեքստը, քանի որ դրա տեքստը ձևավորվում է դինամիկ կերպով բրաուզերում:

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