Sisällön tarkistus NextJS-kehyksessä

Edellisissä oppitunneissa yritimme tehdä kahden tyyppisiä komponentteja - palvelin- ja asiakaskomponentteja. Varmistetaan, että palvelinkomponenteissa SEO-ongelma on ratkaistu. To on, meidän on tarkistettava, että selaimelle saapuu verkkosivun rakenne tekstillä komponentistamme. Tehdään se.

Olkoon palvelinkomponenttimme seuraavanlainen:

export default function Test() {
	let name = 'käyttäjä';
	return <h1>Hei, {name}!</h1>;
}

Avaa sivu tällä komponentilla selaimessa. Paina sitten Ctrl + U. Tämä näppäinyhdistelmä avaa sivun alkuperäisen HTML-koodin. Se on koodi, joka tulee palvelimelta. To on, ennen kuin siihen sovelletaan selaimen JavaScriptiä. Näin hakukoneet näkevät sivumme. Joten, avaa lähdekoodi ja tutki sitä. Sieltä löydät komponenttisi tekstin.

Tehdään nyt esimerkkinä asiakaskomponentti:

'use client';

import { useState } from 'react';

export default function Test() {
	let [name, setName] = useState('käyttäjä');
	return <h1>Hei, {name}!</h1>;
}

Paina taas Ctrl + U ja tutki lähdekoodia. Et löydä komponenttimme tekstiä, koska sen teksti muodostetaan dynaamisesti selaimessa.

Tässä ilmenee pääasiallinen ero palvelin- ja asiakaskomponenttien välillä.

Suorita oppitunnessa kuvatut toimenpiteet.

Kerro, mitä eroa on palvelin- ja asiakaskomponenteilla SEO:n näkökulmasta.

Mitä muita eroja, SEO:n lisäksi, asiakas- ja palvelinkomponenteilla on?