ทำความเข้าใจ React Server Components

ยินดีต้อนรับ

โลกของคอมโพเนนต์สองฝั่ง

คอมโพเนนต์ฝั่งเซิร์ฟเวอร์เป็นค่าเริ่มต้น

// Server Component (default, no directive needed)
export default async function Page() {
  const data = await fetch('/api/posts').then(r => r.json());
  return <ul>{data.map(p => <li key={p.id}>{p.title}</li>)}</ul>;
}

คอมโพเนนต์ฝั่งไคลเอนต์

'use client';
import { useState } from 'react';

export function Counter() {
  const [n, setN] = useState(0);
  return <button onClick={() => setN(n+1)}>{n}</button>;
}

ความสามารถของคอมโพเนนต์ฝั่งเซิร์ฟเวอร์

// Fetch from DB directly in the component!
import { db } from '@/lib/db';

export default async function UserList() {
  const users = await db.select().from(usersTable);
  return <ul>{users.map(u => <li key={u.id}>{u.name}</li>)}</ul>;
}

ข้อจำกัดของคอมโพเนนต์ฝั่งเซิร์ฟเวอร์

การประกอบคอมโพเนนต์ฝั่งเซิร์ฟเวอร์และไคลเอนต์

// Server Component
export default async function Page() {
  const user = await getUser();
  return <ProfileEditor user={user} />; // client component
}

// Client Component (separate file)
'use client';
export function ProfileEditor({ user }) {
  const [name, setName] = useState(user.name);
  return <input value={name} onChange={e => setName(e.target.value)} />;
}

กฎขอบเขตฝั่งไคลเอนต์

คอมโพเนนต์ฝั่งเซิร์ฟเวอร์ที่ไม่ใช้ JavaScript

คอมโพเนนต์ฝั่งเซิร์ฟเวอร์เทียบกับ SSR

ตรวจสอบด่วน

สรุปทบทวน

ขั้นถัดไป