การตรวจสอบเนื้อหาในเฟรมเวิร์ก NextJS

ในบทเรียนที่ผ่านมา เราได้ลอง สร้างคอมโพเนนต์สองประเภท ได้แก่ คอมโพเนนต์เซิร์ฟเวอร์ และคอมโพเนนต์ไคลเอ็นท์ มาลองดูให้แน่ใจว่า ในคอมโพเนนต์เซิร์ฟเวอร์นั้น ได้แก้ไขปัญหา ด้าน SEO แล้ว นั่นคือเราต้องตรวจสอบว่า ในเบราว์เซอร์ได้รับ HTML ที่มีข้อความ ของคอมโพเนนต์ของเรามาอย่างถูกต้อง ลองทำดู

สมมติว่าคอมโพเนนต์เซิร์ฟเวอร์ของเรามี ลักษณะดังนี้:

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

เปิดหน้าเพจที่มีคอมโพเนนต์นี้ในเบราว์เซอร์ จากนั้นกด Ctrl + U นี่คือคีย์ลัด สำหรับเปิดซอร์สโค้ด HTML ของหน้าเพจ นี่คือโค้ดที่มาจากเซิร์ฟเวอร์ นั่นคือ ก่อนที่เบราว์เซอร์จะนำ JavaScript ไปประมวลผล นี่คือวิธีที่เครื่องมือค้นหา เห็นหน้าเว็บของเรา ดังนั้น เปิดซอร์สโค้ด และศึกษาดู คุณจะพบข้อความ ของคอมโพเนนต์ของเราในนั้น

เพื่อเป็นการทดลอง มาสร้างคอมโพเนนต์ไคลเอ็นท์กัน:

'use client';

import { useState } from 'react';

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

กด Ctrl + U อีกครั้งและศึกษา ซอร์สโค้ด คุณจะไม่พบข้อความของคอมโพเนนต์เรา เพราะข้อความของมันถูกสร้างขึ้นมา แบบไดนามิกในเบราว์เซอร์

นี่คือความแตกต่างหลักที่แสดงให้เห็น ระหว่างคอมโพเนนต์เซิร์ฟเวอร์และคอมโพเนนต์ไคลเอ็นท์

ลองทำตามขั้นตอนที่อธิบายไว้ในบทเรียนดู

อธิบายว่าความแตกต่างระหว่างคอมโพเนนต์เซิร์ฟเวอร์ และคอมโพเนนต์ไคลเอ็นท์คืออะไร ในแง่ของ SEO

นอกจาก SEO แล้ว คอมโพเนนต์ไคลเอ็นท์และเซิร์ฟเวอร์ ยังมีข้อแตกต่างอื่นๆ อะไรอีกบ้าง?