เข้าใจคำสั่ง use client ใน Next.js และเทคนิคส่ง children
เจาะลึกการทำงานของคำสั่ง use client ใน Next.js App Router ว่าไม่ทำให้ทั้งแอปพลิเคชันกลายเป็น Client Component พร้อมวิธีใช้ prop children
ภาพประกอบจากคลังภาพสต็อก ไม่ใช่ภาพจากเหตุการณ์จริง
- คำสั่ง use client กำหนดขอบเขตตามการ import ไม่ใช่ตำแหน่งที่แสดงผล
- การส่งเนื้อหาผ่าน prop children ช่วยให้ Component ลูกยังคงเป็น Server Component ได้
- ข้อมูลที่ส่งข้ามฝั่ง Server ไปยัง Client ต้องสามารถ serialize ได้
- การใช้งานแพ็กเกจ server-only ช่วยป้องกันโค้ดฝั่งเซิร์ฟเวอร์รั่วไหลไปยังเบราว์เซอร์
นักพัฒนา Next.js หลายคนมักกังวลว่าเมื่อสร้าง ThemeProvider แล้วใส่คำสั่ง use client ไว้บรรทัดแรก พร้อมกับนำมาครอบเลย์เอาต์ทั้งหมด จะส่งผลให้ทั้งแอปพลิเคชันกลายเป็นฝั่งไคลเอนต์ (Client-side) ทันที ส่งผลให้นักพัฒนาบางกลุ่มเลือกที่จะหลีกเลี่ยงการใช้ Provider หรือใส่คำสั่งนี้ไว้ทุกไฟล์เพื่อความปลอดภัย ซึ่งแท้จริงแล้วแนวทางทั้งสองแบบนั้นไม่ถูกต้อง และกฎการทำงานจริงมีความเรียบง่ายกว่าที่คิด
แท้จริงแล้วคำสั่ง use client ทำหน้าที่เป็นตัวกำหนดขอบเขต โดยระบุว่าไฟล์นี้และทุกไฟล์ที่มีการ import เข้ามาจะถูกส่งโค้ด JavaScript ไปยังเบราว์เซอร์ สิ่งสำคัญคือขอบเขตจะเดินตามกราฟการ import ไม่ใช่ตำแหน่งในโครงสร้างการเรนเดอร์
ภาพประกอบจากคลังภาพสต็อก ไม่ใช่ภาพจากเหตุการณ์จริง
เมื่อเรานำ Component ที่มี use client มาครอบเลย์เอาต์ ตัว children จะไม่ได้ถูก import เข้ามาโดย ThemeProvider แต่ถูกส่งเข้ามาในรูปแบบ prop จากเลย์เอาต์หลักที่เป็น Server Component ทำให้เซิร์ฟเวอร์ทำหน้าที่เรนเดอร์หน้าเว็บก่อน แล้วจึงส่งผลลัพธ์ที่เสร็จสมบูรณ์ไปยัง Client Component ในฐานะช่องว่างสำหรับเติมข้อมูล ส่งผลให้หน้าเพจหลักยังคงเป็น Server Component สามารถดึงข้อมูลและจัดการความลับฝั่งเซิร์ฟเวอร์ได้ตามปกติ
แนวคิดเรื่อง Import Boundary ใน Next.js App Router ช่วยให้เราควบคุมขนาดของ JavaScript bundle ที่ส่งไปยังเบราว์เซอร์ได้อย่างมีประสิทธิภาพ การแยกโค้ดฝั่งเซิร์ฟเวอร์และฝั่งไคลเอนต์ออกจากกันอย่างเด็ดขาดด้วย props แทนการ import ตรงๆ จึงเป็นหัวใจสำคัญของการพัฒนาเว็บแอปพลิเคชันยุคใหม่ที่มีประสิทธิภาพสูง
แนวทางการใช้งานที่ถูกต้องมีข้อสังเกตและหลักปฏิบัติที่สำคัญดังนี้:
- การส่งข้อมูลข้ามขอบเขตต้องเป็นรูปแบบที่สามารถแปลงเป็น serializable ได้ เช่น สตริง, ตัวเลข, อาร์เรย์ และวันที่ ยกเว้น Server Actions
- การใช้งานโมดูล server-only จะช่วยป้องกันไม่ให้ไฟล์ฝั่งไคลเอนต์ดึงฐานข้อมูลหรือข้อมูลลับผ่านคำสั่ง import โดยจะแสดงข้อผิดพลาดในการ build ทันที
- ควรใส่คำสั่ง use client เฉพาะที่ Component ย่อยสุดที่ต้องการ interactivity เท่านั้น
- ใช้ prop children หรือ slot อื่น ๆ เช่น sidebar และ header สำหรับรับเนื้อหาที่เป็น Server Component
ที่มา: Dev.to
พบข้อมูลผิดพลาดในบทความนี้? แจ้งปัญหาบทความนี้
ความคิดเห็น
แสดงความคิดเห็น