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ă:

export 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:

'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.

Efectuați manipulările descrise în lecție.

Explicați care este diferența dintre componentele server și componentele client din punctul de vedere al SEO.

Pe lângă SEO, ce alte diferențe au componentele client și server?