Provera sadržaja u NextJS frejmvorku

U prethodnim lekcijama smo pokušali da napravimo dva tipa komponenti - serverske i klijentske. Uverimo se u to da je u server komponentama rešen problem sa SEO. To jest, trebalo bi da proverimo da u brauzer stiže verzstka sa tekstom naše komponente. Uradimo to.

Neka naša serverska komponenta ima sledeći izgled:

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

Otvorite stranicu sa ovom komponentom u brauzeru. Zatim pritisnite Ctrl + U. Ova kombinacija tastera otvara izvorni HTML kod stranice. To je kod koji stiže sa servera. To jest, pre primene brauzerskog JavaScript-a. Upravo tako i vidí našu stranicu pretraživači. Dakle, otvorite izvorni kod i proučite ga. Tamo ćete naći tekst naše komponente.

Hajde da za primer sada napravimo klijentsku komponentu:

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

import { useState } from 'react';

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

Opet pritisnite Ctrl + U i proučite izvorni kod. Nećete naći tekst naše komponente, jer se njegov tekst formira dinamički u brauzeru.

U tome se i ogleda osnovna razlika između server i klijentskih komponenti.