เลิกเขียน API Routes ซะที: เจาะลึกการใช้งาน Next.js Server Actions
เพิ่มความเร็วในการพัฒนาเว็บแอปพลิเคชันด้วย Next.js Server Actions ที่ช่วยตัดขั้นตอนการสร้าง API ขั้นกลางและการจัดการโค้ดฝั่งเซิร์ฟเวอร์ที่ยุ่งยากออกไป
ภาพประกอบจากคลังภาพสต็อก ไม่ใช่ภาพจากเหตุการณ์จริง
- การส่งฟอร์มใน React แบบดั้งเดิมต้องอาศัยโค้ด Boilerplate จำนวนมาก
- Next.js App Router นำเสนอ Server Actions เพื่อร่นระยะเวลาและเพิ่มความเร็วในการพัฒนา
- Server Actions คือฟังก์ชัน Asynchronous ที่รันบนเซิร์ฟเวอร์เท่านั้นและเรียกใช้ได้จากคอมโพเนนต์
- การใช้งานทำได้ง่ายเพียงกำหนดคำสั่ง "use server" ในไฟล์แยกต่างหาก
การพัฒนาเว็บแอปพลิเคชันประเภท Single Page Applications (SPAs) ในอดีต มักมาพร้อมกับความยุ่งยากในการส่งข้อมูลฟอร์มธรรมดาๆ ที่ต้องใช้โค้ดโครงสร้างพื้นฐานหรือ Boilerplate จำนวนมาก นักพัฒนาจำเป็นต้องสร้าง API route ฝั่งหลังบ้านขึ้นมาโดยเฉพาะ เขียนคำขอ fetch จากฝั่งไคลเอนต์ จัดการสถานะการโหลด รับมือกับปัญหา Cross-Origin Resource Sharing (CORS) รวมถึงต้องคอยซิงก์หน้าจอ UI ให้ตรงกับข้อมูลที่เพิ่งถูกเปลี่ยนแปลงด้วยตนเองทุกขั้นตอน
เพื่อแก้ปัญหานี้ ทีมงาน Smart Tech Devs จึงหันมาเร่งความเร็วในการพัฒนาส่วนติดต่อผู้ใช้ด้วยการนำ Server Actions ใน Next.js App Router มาปรับใช้ สถาปัตยกรรมรูปแบบนี้ช่วยให้ทีมสามารถรันโค้ดฝั่งเซิร์ฟเวอร์ที่มีความปลอดภัยได้โดยตรงจากการโต้ตอบของผู้ใช้งานฝั่งไคลเอนต์ ซึ่งช่วยตัดความจำเป็นในการสร้างจุดเชื่อมต่อ API ขั้นกลางออกไปได้อย่างสิ้นเชิง
ภาพประกอบจากคลังภาพสต็อก ไม่ใช่ภาพจากเหตุการณ์จริง
การเปลี่ยนผ่านจากการใช้ API Routes มาสู่ Server Actions ถือเป็นการเปลี่ยนแปลงครั้งสำคัญในโลกของ Next.js เนื่องจากช่วยลดความซับซ้อนในการจัดการ Network Request และลดขนาดของโค้ดฝั่งไคลเอนต์ได้อย่างมีนัยสำคัญ นักพัฒนาไม่ต้องคอยสร้าง Endpoint แยกสำหรับทุกๆ ฟอร์มการใช้งานอีกต่อไป ส่งผลให้การดูแลรักษาโค้ดเบสในระยะยาวทำได้ง่ายและรวดเร็วยิ่งขึ้น
ในเชิงเทคนิคแล้ว Server Actions คือฟังก์ชันแบบ Asynchronous ที่ทำงานบนเซิร์ฟเวอร์เท่านั้น แต่ความพิเศษคือมันสามารถถูกเรียกใช้งานได้โดยตรงจากคอมโพเนนต์ของ React ไม่เว้นแม้กระทั่ง Client Components ซึ่งช่วยเบลอเส้นแบ่งระหว่างการทำงานของฝั่งฟรونتเอนด์และแบ็กเอนด์ให้แนบเนียนยิ่งขึ้น
ขั้นตอนการใช้งานจริงเริ่มต้นจากการสร้างไฟล์สำหรับเก็บ Actions โดยเฉพาะ จากนั้นใส่คำสั่ง "use server" ไว้ภายในไฟล์ เมื่อทำเช่นนี้แล้ว เราจะสามารถเขียนโค้ดเพื่อติดต่อฐานข้อมูลได้อย่างปลอดภัย เนื่องจากโค้ดส่วนนี้จะไม่ถูกส่งไปยังเบราว์เซอร์ของผู้ใช้อย่างแน่นอน
ที่มา: Dev.to
พบข้อมูลผิดพลาดในบทความนี้? แจ้งปัญหาบทความนี้
ความคิดเห็น
แสดงความคิดเห็น