Penyemakan Kandungan dalam Framework NextJS

Dalam pelajaran sebelumnya, kami telah mencuba untuk membuat dua jenis komponen - komponen pelayan dan komponen pelanggan. Mari kita pastikan bahawa masalah SEO telah diselesaikan dalam komponen pelayan. Iaitu, kita mesti menyemak bahawa pelayar menerima markup dengan teks komponen kita. Mari lakukannya.

Katakan komponen pelayan kami mempunyai rupa berikut:

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

Buka halaman dengan komponen ini dalam pelayar. Kemudian tekan Ctrl + U. Ini adalah kombinasi kekunci yang akan membuka kod HTML sumber halaman. Ini adalah kod yang datang dari pelayan. Iaitu, sebelum penggunaan JavaScript pelayar dilakukan. Beginilah cara enjin carian melihat halaman kami. Jadi, buka sumber kod dan kaji ia. Di sana anda akan menemui teks komponen kami.

Sebagai contoh, sekarang mari buat komponen pelanggan:

'use client';

import { useState } from 'react';

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

Tekan sekali lagi Ctrl + U dan kaji kod sumber. Anda tidak akan menemui teks komponen kami, kerana teksnya dibentuk secara dinamik dalam pelayar.

Inilah yang menunjukkan perbezaan utama antara komponen pelayan dan komponen pelanggan.

Lakukan manipulasi yang diterangkan dalam pelajaran.

Terangkan apakah perbezaan antara komponen pelayan dan komponen pelanggan dari sudut pandangan SEO.

Selain SEO, apakah perbezaan lain yang dimiliki oleh komponen pelanggan dan komponen pelayan?