Preverjanje vsebine v ogrodju NextJS

V prejšnjih lekcijah smo poskusili narediti dve vrsti komponent - strežniške in odjemalske. Prepričajmo se, da je v strežniških komponentah rešena težava s SEO. To pomeni, da moramo preveriti, da v brskalnik pride razporeditev z besedilom naše komponente. Naredimo to.

Naj ima naša strežniška komponenta naslednjo obliko:

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

Odprite stran s to komponento v brskalniku. Nato pritisnite Ctrl + U. Ta kombinacija tipk bo odprla izvorno kodo HTML strani. To je koda, ki pride s strežnika. To je pred uporabo brskalniškega JavaScripta. Prav tako naše strani vidijo iskanja. Torej, odprite izvorno kodo in jo preučite. Tam boste našli besedilo naše komponente.

Za primer naredimo zdaj odjemalsko komponento:

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

import { useState } from 'react';

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

Spet pritisnite Ctrl + U in preučite izvorno kodo. Ne boste našli besedila naše komponente, saj se njegovo besedilo oblikuje dinamično v brskalniku.

V tem se kaže glavna razlika med strežniškimi in odjemalskimi komponentami.