Sisällön tarkistus NextJS-kehyksessä

Edellisissä oppitunneissa yritimme tehdä kahden tyyppisiä komponentteja - palvelin- ja asiakaskomponentteja. Varmistetaan, että palvelinkomponenteissa SEO-ongelma on ratkaistu. To on, meidän on tarkistettava, että selaimelle saapuu verkkosivun rakenne tekstillä komponentistamme. Tehdään se.

Olkoon palvelinkomponenttimme seuraavanlainen:

src/app/test/page.jsxexport default function Test() {
  let name = 'käyttäjä';
  return <h1>Hei, {name}!</h1>;
}

Avaa sivu tällä komponentilla selaimessa. Paina sitten Ctrl + U. Tämä näppäinyhdistelmä avaa sivun alkuperäisen HTML-koodin. Se on koodi, joka tulee palvelimelta. To on, ennen kuin siihen sovelletaan selaimen JavaScriptiä. Näin hakukoneet näkevät sivumme. Joten, avaa lähdekoodi ja tutki sitä. Sieltä löydät komponenttisi tekstin.

Tehdään nyt esimerkkinä asiakaskomponentti:

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

import { useState } from 'react';

export default function Test() {
  let [name, setName] = useState('käyttäjä');
  return <h1>Hei, {name}!</h1>;
}

Paina taas Ctrl + U ja tutki lähdekoodia. Et löydä komponenttimme tekstiä, koska sen teksti muodostetaan dynaamisesti selaimessa.

Tässä ilmenee pääasiallinen ero palvelin- ja asiakaskomponenttien välillä.