Memeriksa Konten dalam Framework NextJS

Dalam pelajaran sebelumnya, kita telah mencoba membuat dua jenis komponen - komponen server dan komponen klien. Mari kita pastikan bahwa dalam komponen server, masalah dengan SEO telah teratasi. Artinya, kita harus memeriksa bahwa ke browser datang markup dengan teks komponen kita. Mari kita lakukan ini.

Misalkan komponen server kita memiliki bentuk berikut:

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

Buka halaman dengan komponen ini di browser. Kemudian tekan Ctrl + U. Ini adalah kombinasi tombol yang akan membuka kode HTML sumber halaman. Ini adalah kode yang datang dari server. Artinya, sebelum penerapan JavaScript browser terhadapnya. Begitulah cara mesin pencari melihat halaman kita. Jadi, buka kode sumber dan pelajari itu. Di sana Anda akan menemukan teks komponen kita.

Sebagai contoh, sekarang mari kita buat komponen klien:

'use client';

import { useState } from 'react';

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

Tekan lagi Ctrl + U dan pelajari kode sumbernya. Anda tidak akan menemukan teks komponen kita, karena teksnya terbentuk secara dinamis di browser.

Dalam hal inilah perbedaan utama antara komponen server dan komponen klien terwujud.

Lakukan manipulasi yang dijelaskan dalam pelajaran.

Jelaskan apa perbedaan antara komponen server dan komponen klien dari sudut pandang SEO.

Selain SEO, perbedaan apa lagi yang dimiliki komponen klien dan komponen server?