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

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

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

src/app/test/page.jsxexport default function Test() {
  let name = 'მომხმარებელი';
  return <h1>გამარჯობა, {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('მომხმარებელი');
  return <h1>გამარჯობა, {name}!</h1>;
}

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

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