- Addy Osmani สังกัดทีม Google Chrome และมีความเชี่ยวชาญเรื่องเฟรมเวิร์กและไลบรารีมากถึงขั้นเคยโปรโมตโปรเจกต์อย่าง TodoMVC และ HNPWA
- RSC?
- ผสานการดึงข้อมูลเข้าเป็นองค์ประกอบสำคัญของการจัดโครงสร้างคอมโพเนนต์ทรี ทำให้สามารถรอที่ระดับบนสุดและซีเรียลไลซ์ข้อมูลฝั่งเซิร์ฟเวอร์ได้
- RSC คือ Stateless React Component ที่ทำงานบนเซิร์ฟเวอร์ และมอบประสบการณ์ที่ช่วยให้สามารถนำโค้ดที่ดูแลรักษาได้กลับมาใช้ซ้ำระหว่างเซิร์ฟเวอร์กับไคลเอนต์คอมโพเนนต์ได้ง่ายขึ้น (
knitting) - ทำให้สามารถมีการทำ routing แบบคล้าย SPA บนสถาปัตยกรรมที่คล้าย MPA ได้
- การนำไปใช้งานจริง (ที่เฟรมเวิร์กมอบให้) จะแตกต่างกันไปตามแต่ละเฟรมเวิร์ก
- ทีม React มองว่าจะถูกนำไปใช้อย่างแพร่หลายและส่งผลต่อ ecosystem โดย Dan จากทีม React เปรียบว่า Server Component คือโครงกระดูกของ data flow ในแอป ส่วน Client Component คือเนื้อที่หุ้มอยู่รอบกระดูกนั้น
- แล้ว Next.js App Router กับ Server Component เชื่อมโยงกันอย่างไร?
- รองรับ RSC ตั้งแต่ Next.js 13+
- คอมโพเนนต์ภายในเส้นทาง
appจะรองรับ RSC โดยอัตโนมัติ - RSC ใช้ประโยชน์จากโครงสร้างพื้นฐานฝั่งเซิร์ฟเวอร์และการใช้ dependencies เพื่อรองรับประสิทธิภาพที่ดีขึ้นและ bundle size ที่เล็กลง
- Next.js App Router ผสมการเรนเดอร์ฝั่งเซิร์ฟเวอร์และฝั่งไคลเอนต์เพื่อค่อย ๆ ยกระดับแอป ทำให้ประสบการณ์ของผู้ใช้เป็นธรรมชาติ สามารถระบุให้ใช้ Client Component ได้ (
use client) และวางสลับกันในคอมโพเนนต์ทรีเดียวกันได้ - กำลังมีประสบการณ์การใช้งานที่ดีจำนวนมากจากการใช้ Next.js App Router
- ยังมีหัวข้อที่เกี่ยวข้องอีกหลากหลาย ลองอ่านกันดูได้
ยังไม่มีความคิดเห็น