Sisu kontrollimine NextJS raamistikus

Eelmistes õppetükides proovisime teha kaht tüüpi komponente - serveri- ja kliendikomponendid. Veendugem, et serverikomponentides on SEO probleem lahendatud. See tähendab, et peame kontrollima, et brauserisse jõuab meie komponendi tekstiga veeristus. Teeme selle.

Olgu meie serverikomponendil järgmine välimus:

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

Avage selle komponendiga leht brauseris. Seejõrel vajutage Ctrl + U. See klahvikombinatsioon avab lehe algse HTML-koodi. See on kood, mis tuleb serverist. See tähendab enne sellele brauseri JavaScripti rakendamist. Just nii näevad meie lehte otsingumootorid. Niisiis, avage algne kood ja uurige seda. Sealt leiate meie komponendi teksti.

Teeme näiteks nüüd kliendikomponendi:

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

import { useState } from 'react';

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

Vajutage jälle Ctrl + U ja uurige algkoodi. Te ei leia meie komponendi teksti, kuna selle tekst moodustub dünaamiliselt brauseris.

Selles ilmnebki peamine erinevus serveri- ja kliendikomponentide vahel.