Inhoudsverifikasie in die NextJS-raamwerk

In vorige lesse het ons probeer om twee tipes komponente te maak - bediener- en kliëntkomponente. Kom ons maak seker dat die SEO-probleem in bedienerkomponente opgelos is. Dit beteken ons moet verifieer dat die opmaak met die teks van ons komponent in die blaaier arriveer. Laat ons dit doen.

Laat ons bedienerkomponent die volgende voorkoms hê:

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

Maak die bladsy met hierdie komponent in die blaaier oop. Druk dan op Ctrl + U. Dit is die sleutelkombinasie wat die bron-HTML-kode van die bladsy sal oopmaak. Dit is die kode wat van die bediener af kom. Dus, voordat die blaaierse JavaScript daarop toegepas word. Dit is hoe soekenjins ons bladsy sien. Maak dus die bron- kode oop en bestudeer dit. Daar sal jy die teks van ons komponent vind.

Laat ons nou byvoorbeeld 'n kliënt- komponent maak:

'use client';

import { useState } from 'react';

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

Druk weer Ctrl + U en bestudeer die bronkode. Jy sal nie die teks van ons komponent vind nie, aangesien die teks daarvan dinamies in die blaaier gevorm word.

Dit is hoe die hoofverskil tussen bediener- en kliëntkomponente sigbaar word.

Voer die manipulasies wat in die les beskryf word uit.

Verduidelik wat die verskil tussen bediener- en kliëntkomponente is

Benewens SEO, watter ander verskille het kliënt- en bedienerkomponente?