Provera sadržaja u NextJS frejmvorku

U prethodnim lekcijama smo pokušali da napravimo dva tipa komponenti - serverske i klijentske. Uverimo se u to da je u server komponentama rešen problem sa SEO. To jest, trebalo bi da proverimo da u brauzer stiže verzstka sa tekstom naše komponente. Uradimo to.

Neka naša serverska komponenta ima sledeći izgled:

export default function Test() {
	let name = 'user';
	return <h1>Zdravo, {name}!</h1>;
}

Otvorite stranicu sa ovom komponentom u brauzeru. Zatim pritisnite Ctrl + U. Ova kombinacija tastera otvara izvorni HTML kod stranice. To je kod koji stiže sa servera. To jest, pre primene brauzerskog JavaScript-a. Upravo tako i vidí našu stranicu pretraživači. Dakle, otvorite izvorni kod i proučite ga. Tamo ćete naći tekst naše komponente.

Hajde da za primer sada napravimo klijentsku komponentu:

'use client';

import { useState } from 'react';

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

Opet pritisnite Ctrl + U i proučite izvorni kod. Nećete naći tekst naše komponente, jer se njegov tekst formira dinamički u brauzeru.

U tome se i ogleda osnovna razlika između server i klijentskih komponenti.

Provedite manipulacije opisane u lekciji.

Objasnite u čemu je razlika između serverskih i klijentskih komponenti sa stanovišta SEO-a.

Pored SEO-a, koje još razlike imaju klijentske i serverske komponente?