Verificarea conținutului în framework-ul NextJS

În lecțiile anterioare am încercat să facem două tipuri de componente - server și client. Să ne asigurăm că în componentele server problema cu SEO este rezolvată. Adică trebuie să verificăm, că în browser vine markup-ul cu textul componentei noastre. Să facem asta.

Să presupunem că componenta noastră server are următoarea formă:

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

Deschideți pagina cu această componentă în browser. Apoi apăsați Ctrl + U. Această combinație de taste va deschide codul HTML sursă al paginii. Acesta este codul care vine de la server. Adică înainte de aplicarea JavaScript-ului de browser. Așa văd pagina noastră motoarele de căutare. Deci, deschideți codul sursă și studiați-l. Acolo veți găsi textul componentei noastre.

Să facem, de exemplu, acum o componentă client:

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>;
}

Din nou apăsați Ctrl + U și studiați codul sursă. Nu veți găsi textul componentei noastre, deoarece textul acesteia se formează dinamic în browser.

În asta se manifestă diferența principală între componentele server și componentele client.