Contentcontrole in het NextJS-framework

In eerdere lessen hebben we geprobeerd twee soorten componenten te maken - server en client. Laten we ervoor zorgen dat in servercomponenten het probleem met SEO is opgelost. Dat betekent dat we moeten controleren dat de markup met de tekst van onze component in de browser arriveert. Laten we dit doen.

Stel dat onze servercomponent er als volgt uitziet:

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

Open de pagina met deze component in de browser. Druk vervolgens op Ctrl + U. Deze toetscombinatie opent de HTML-broncode van de pagina. Dit is de code die van de server arriveert. Dat wil zeggen, vóór de toepassing van browser JavaScript. Zo zien zoekmachines onze pagina. Dus, open de bron code en bestudeer het. Daar vind je de tekst van onze component.

Laten we nu bijvoorbeeld een client component maken:

'use client';

import { useState } from 'react';

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

Druk weer op Ctrl + U en bestudeer de broncode. Je zult de tekst van onze component niet vinden, omdat de tekst dynamisch wordt gevormd in de browser.

Dit is het belangrijkste verschil tussen server- en clientcomponenten.

Voer de in de les beschreven handelingen uit.

Leg uit wat het verschil is tussen server en clientcomponenten vanuit SEO-oogpunt.

Naast SEO, welke andere verschillen hebben client- en servercomponenten?