Next.js Roadmap • Week 1 Day 1

Boundary
Resolution.

ทำความเข้าใจเส้นแบ่งขอบเขตระหว่าง Server และ Client รวมถึงการใช้งาน `use client` และกฎของการ Serialization

Server
Components

Default
  • ทำงานและ Render บน Server เท่านั้น
  • ไม่ส่ง JavaScript ไปที่ Browser (Zero Bundle Size)
  • เข้าถึง Database หรือ Backend Services ได้โดยตรง และปลอดภัย

Client
Components

Interactive
  • ทำงานฝั่ง Browser (แต่ Pre-render บน Server ด้วย)
  • รองรับ State และ Lifecycle (useState, useEffect)
  • รองรับ Event Listeners (onClick, onChange)

The Directive Boundary

Server
Client

เมื่อเราต้องการใช้ฟีเจอร์ของ Client (เช่น State หรือ onClick) เราต้องประกาศ Boundary ไว้ที่บรรทัดแรกสุดของไฟล์ เพื่อบอก Next.js ว่าคอมโพเนนต์นี้และลูกๆ ของมันจะถูก Bundle ไปยัง Client

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

export default function InteractiveButton() {
  const [count, setCount] = useState(0);

  return (
    <button onClick={() => setCount(count + 1)}>
      Clicked {count} times
    </button>
  );
}

Serialization Rule

การส่ง Props จาก Server Component ไปยัง Client Component ข้อมูลเหล่านั้นต้องสามารถ Serialize ได้ (แปลงเป็น JSON ได้)

✅ Serializable (ส่งได้)

Strings Numbers Booleans Arrays Plain Objects

❌ Non-Serializable (ส่งไม่ได้)

Functions Dates (ต้องแปลงเป็น String ก่อน) Classes
Pro Tip

เราสามารถส่ง React Component เป็น children prop ผ่าน Client Component ได้ เพื่อหลีกเลี่ยงการทำให้ Component ลูกทั้งหมดกลายเป็น Client Component ตามไปด้วย