Turinio patikrinimas NextJS karkase

Ankstesnėse pamokose mes bandėme sukurti du komponentų tipus – serverinius ir klientinius. Įsitikinkime, kad serveriniuose komponentuose išspręsta problema su SEO. Tai yra, mes turime patikrinti, kad į naršyklę ateina sugeneruotas HTML su tekstu mūsų komponento. Padarykime tai.

Tegul mūsų serverinis komponentas atrodo taip:

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

Atidarykite puslapį su šiuo komponentu naršyklėje. Tada paspauskite Ctrl + U. Ši klavišų kombinacija atvers pirminį puslapio HTML kodą. Tai yra tas kodas, kuris ateina iš serverio. Tai yra prieš pritaikant jam naršyklės JavaScript. Būtent taip mūsų puslapį mato paieškos sistemos. Taigi, atidarykite pirminį kodą ir ištirkite jį. Ten rasite mūsų komponento tekstą.

Dabar, pavyzdžiui, sukurkime klientinį komponentą:

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>;
}

Vėl paspauskite Ctrl + U ir ištirkite pirminį kodą. Jūs nerasite mūsų komponento teksto, nes jo tekstas formuojamas dinamiškai naršyklėje.

Tai ir atskleidžia pagrindinį skirtumą tarp serverinių ir klientinių komponentų.