კონტენტის შემოწმება NextJS ფრეიმვორკში

წინა გაკვეთილებში ჩვენ სცადეთ შეგვექმნა ორი ტიპის კომპონენტი - სერვერული და კლიენტური. მოდით, დავრწმუნდეთ, რომ სერვერულ კომპონენტებში მოგვარებულია პრობლემა SEO-სთან. ანუ ჩვენ უნდა შევამოწმოთ, რომ ბრაუზერში ჩამოდის ვერსტკა ჩვენი კომპონენტის ტექსტით. გავაკეთოთ ეს.

დაე, ჩვენს სერვერულ კომპონენტს ჰქონდეს შემდეგი სახი:

export default function Test() {
	let name = 'მომხმარებელი';
	return <h1>გამარჯობა, {name}!</h1>;
}

გახსენით ამ კომპონენტის გვერდი ბრაუზერში. შემდეგ დააჭირეთ Ctrl + U. ეს კომბინაცია ღილაკების გახსნის HTML კოდის წყაროს. ეს არის ის კოდი, რომელიც სერვერიდან ჩამოდის. ანუ ბრაუზერულ JavaScript-ზე გამოყენებამდე. სწორედ ასე ხედავს ჩვენს გვერდს საძიებო სისტემები. ასე რომ, გახსენით წყაროს კოდი და შეისწავლეთ იგი. იქ თქვენ იპოვით ტექსტს ჩვენი კომპონენტის.

მაგალითისთვის მოდით ახლა გავაკეთოთ კლიენტური კომპონენტი:

'use client';

import { useState } from 'react';

export default function Test() {
	let [name, setName] = useState('მომხმარებელი');
	return <h1>გამარჯობა, {name}!</h1>;
}

კვლავ დააჭირეთ Ctrl + U და შეისწავლეთ წყაროს კოდი. თქვენ ვერ იპოვით ჩვენი კომპონენტის ტექსტს, ვინაიდან მისი ტექსტი ფორმირდება დინამიურად ბრაუზერში.

ამაში ვლინდება ძირითადი განსხვავება სერვერულ და კლიენტურ კომპონენტებს შორის.

განახორციელეთ გაკვეთილში აღწერილი მანიპულაციები.

ამოხსენით რა განსხვავებაა სერვერულ და კლიენტურ კომპონენტებს შორის SEO-ს თვალსაზრისით.

SEO-ს გარდა, რა სხვა განსხვავებები აქვთ კლიენტურ და სერვერულ კომპონენტებს?