Satura pārbaude NextJS framewrok

Iepriekšējās nodarbībās mēs mēģinājām izveidot divu veidu komponentes - servera un klienta. Pārliecināsimies, ka servera komponentēs ir atrisināta problēma ar SEO. Tas ir, mums ir jāpārbauda, ka pārlūkprogrammai ierodas marķējums ar tekstu mūsu komponentes. Darīsim to.

Lai mūsu servera komponente ir šādā formā:

export default function Test() {
	let name = 'lietotājs';
	return <h1>sveiki, {name}!</h1>;
}

Atveriet lapu ar šo komponenti pārlūkprogrammā. Pēc tam nospiediet Ctrl + U. Šī taustiņu kombinācija atvērs lapas oriģinālo HTML kodu. Tas ir kods, kas nāk no servera. Tas ir, pirms pārlūkprogrammas JavaScript piemērošanas. Tā mūsu lapu redz meklētājsistēmas. Tātad, atveriet oriģinālo kodu un izpētiet to. Tur jūs atradīsiet teksta mūsu komponentes.

Piemēram, tagad izveidosim klienta komponenti:

'use client';

import { useState } from 'react';

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

Atkal nospiediet Ctrl + U un izpētiet oriģinālo kodu. Jūs neatradīsiet teksta mūsu komponentes, jo tā teksts tiek veidots dinamiski pārlūkprogrammā.

Tā izpaužas galvenā atšķirība starp servera un klienta komponentēm.

Izpildiet nodarbībā aprakstītās manipulācijas.

Pastāstiet, kāda ir atšķirība starp servera un klienta komponentēm no SEO viedokļa.

Papildus SEO, kādas citas atšķirības ir klienta un servera komponentēm?