Kontrolli i Përmbajtjes në NextJS Framework

Në mësimet e mëparshme ne u përpoqëm të bëjmë dy lloje komponentësh - server dhe klient. Le të sigurohemi që, në komponentët server, problemi me SEO është zgjidhur. Kjo do të thotë ne duhet të kontrollojmë, që në shfletues vjen HTML me tekstin e komponentit tonë. Le ta bëjmë këtë.

Le të supozojmë se komponenti ynë server ka pamjen e mëposhtme:

src/app/test/page.jsxexport default function Test() {
  let name = 'përdorues';
  return <h1>përshëndetje, {name}!</h1>;
}

Hapni faqen me këtë komponent në shfletues. Pastaj shtypni Ctrl + U. Ky është kombinimi i tasteve që hap kodin burimor HTML të faqes. Ky është kodi që vjen nga serveri. Kjo do të thotë, para aplikimit të JavaScript-it të shfletuesit. Kështu e shfaqin faqen tonë sistemet e kërkimit. Pra, hapni kodin burimor dhe studiojeni atë. Aty do të gjeni tekstin e komponentit tonë.

Tani, për shembull, le të bëjmë një komponent klient:

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

import { useState } from 'react';

export default function Test() {
  let [name, setName] = useState('përdorues');
  return <h1>përshëndetje, {name}!</h1>;
}

Shtypni përsëri Ctrl + U dhe studioni kodin burimor. Nuk do të gjeni tekstin e komponentit tonë, pasi teksti i tij formohet në mënyrë dinamike në shfletues.

Kjo është dallimi kryesor midis komponentëve server dhe atyre klient.