Tartalom ellenőrzése a NextJS keretrendszerben

Az előző leckékben megpróbáltunk két típusú komponenst készíteni - szerver oldalit és kliens oldalit. Győződjünk meg arról, hogy a szerver oldali komponensekben megoldódott az SEO probléma. Vagyis ellenőriznünk kell, hogy a böngészőbe megérkezik-e a komponensünk szövegével ellátott HTML. Tegyük ezt meg.

Tegyük fel, hogy a szerver oldali komponensünk a következő formájú:

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

Nyissa meg a böngészőben az oldalt ezzel a komponenssel. Ezután nyomja meg a Ctrl + U billentyűkombinációt. Ez a kombináció megnyitja az oldal forrás HTML kódját. Ez az a kód, amely a szerverről érkezik. Vagyis mielőtt a böngészeres JavaScript hozzáférne. Így látják az oldalunkat a keresőmotorok. Szóval, nyissa meg a forráskódot és tanulmányozza. Meg fogja találni benne a komponensünk szövegét.

Vegyünk most példaként egy kliens oldali komponenst:

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

import { useState } from 'react';

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

Ismét nyomja meg a Ctrl + U billentyűkombinációt és tanulmányozza a forráskódot. Nem fogja megtalálni a komponensünk szövegét, mivel a szövege dinamikusan jön létre a böngészőben.

Ebben nyilvánul meg a fő különbség a szerver oldali és a kliens oldali komponensek között.