React Server Components คืออะไร และใช้ยังไง

React Server Components หรือ RSC เป็นฟีเจอร์ที่เปลี่ยนวิธีที่เรา render UI ไปอย่างสิ้นเชิง โดย component ทำงานบน server และส่งผลลัพธ์เป็น serialized representation ของ UI มาให้ browser แทนที่จะส่ง JavaScript ทั้งก้อน ความแตกต่างหลักระหว่าง Server Component และ Client Component คือ Server Component ไม่มี state, ไม่ใช้ event handlers, ไม่ใช้ browser-only API แต่สามารถ fetch ข้อมูลได้โดยตรง เข้าถึง file system และ database ได้เลยโดยไม่ต้องผ่าน API ใน Next.js 14 App Router ทุก component เป็น Server Component โดย default การเพิ่ม "use client" ที่ด้านบนของไฟล์จะเปลี่ยนเป็น Client Component ซึ่งควรทำเฉพาะเมื่อต้องการ useState, useEffect, event handlers หรือ browser API เท่านั้น หลักการสำคัญคือควร push Client Component ลงไปให้ลึกที่สุดในต้นไม้ component เพื่อให้ส่วนใหญ่ของแอปยังคงเป็น Server Component และได้ประโยชน์จากการลด JavaScript ที่ส่งไปยัง browser