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?