Next.js Server and Client Components

Expert guidance on when and how to use Server Components vs Client Components in Next.js App Router, including interleaving patterns, hydration, and best practices.

@doc-version: 16.2.6

Core Concepts

ใน Next.js App Router คอมโพเนนต์แบ่งเป็น 2 ประเภทตามสภาพแวดล้อมที่รัน:

• Server Components (default) — รันบนเซิร์ฟเวอร์เท่านั้น
• Client Components ("use client") — รันบนเบราว์เซอร์ (และ server สำหรับ SSR)

Guidelines

1. เมื่อไหร่ควรใช้คอมโพเนนต์ไหน?