React Server Components (RSC) แสดงผล บนเซิร์ฟเวอร์เท่านั้น — JavaScript ของพวกเขาจะไม่ถูกส่งไปยังเบราว์เซอร์เลย ใน App Router ทุกคอมโพเนนต์คือ Server Component โดยค่าเริ่มต้น คุณสามารถเลือกใช้พฤติกรรมของไคลเอนต์อย่างชัดแจ้ง
db ;
() {
users = db..();
(
);
}
Server Components สามารถเป็น async await ข้อมูลโดยตรง และเข้าถึงทรัพยากรเฉพาะเซิร์ฟเวอร์ (ฐานข้อมูล ระบบไฟล์ ข้อมูลลับ) — เพราะพวกเขาทำงานบนเซิร์ฟเวอร์ ไม่จำเป็นต้องมีเลเยอร์ API ในการดึงข้อมูล และข้อมูลลับจะไม่ถึงไคลเอนต์
เบราว์เซอร์ได้รับ HTML/UI ที่แสดงผล ไม่ใช่รหัสของคอมโพเนนต์หรือการอ้างอิง Server Component ที่ใช้ไลบรารี markdown หรือ date ที่หนัก จะไม่ส่ง ไลบรารีนั้นไปยังเบราว์เซอร์เลย — ลดขนาดกลุ่มลงอย่างมาก
// ❌ these only work in Client Components
useState, useEffect, useRef // hooks (no interactivity/state on the server)
onClick, onChange // event handlers
window, localStorage, document // browser-only APIs
ไม่มีการโต้ตอบ สถานะ เอฟเฟกต์ หรือ API ของเบราว์เซอร์ — สิ่งเหล่านี้ต้องการ Client Component
// Server Component fetches data, passes it to an interactive Client Component
import LikeButton from "./LikeButton"; // a "use client" component
export default async function Post({ id }) {
const post = await getPost(id); // server-side fetch
return <><Article post={post} /><LikeButton postId={id} /></>;
}
รูปแบบ: Server Components จัดการข้อมูล/โครงสร้าง ฝัง Client Components เฉพาะที่มีการโต้ตอบ ("islands")
Server Components คือคุณลักษณะที่กำหนด App Router
พวกเขาลดขนาดกลุ่มไคลเอนต์ (JS น้อยที่จะดาวน์โหลด/แยกวิเคราะห์) อนุญาตการเข้าถึงข้อมูลฝั่งเซิร์ฟเวอร์โดยตรงอย่างปลอดภัยโดยไม่มี API และปรับปรุงประสิทธิภาพและ SEO
การรู้ว่าพวกเขาเป็นค่าเริ่มต้น — และสิ่งที่บังคับให้คอมโพเนนต์เป็น Client Component — เป็นพื้นฐานในการสร้างแอป App Router อย่างมีประสิทธิภาพ