Next.js Server Actions ช่วยให้คุณตัดการใช้ API Routes สำหรับฟอร์มแบบง่ายๆ ออกไปได้

Next.js ช่วยให้นักพัฒนาสามารถเรียกใช้ฟังก์ชันที่ทำงานเฉพาะบนเซิร์ฟเวอร์ (server-only functions) ได้โดยตรงจากคอมโพเนนต์ ซึ่งช่วยลดความจำเป็นในการสร้าง API routes แยกต่างหากสำหรับงานทั่วไปอย่างการส่งฟอร์ม (form submissions) ด้วยการใช้ฟีเจอร์ Server Actions ใหม่ ฟอร์ม HTML เพียงอันเดียวก็สามารถสั่งให้โค้ดฝั่ง backend ทำงานได้โดยไม่ต้องผ่านการเรียก fetch ระหว่างกลาง ช่วยลดโค้ดส่วนเกิน (boilerplate) และทำให้การเชื่อมต่อระหว่าง front-end และ back-end กระชับยิ่งขึ้น

ทำไมวิธีแบบเดิมถึงดูยุ่งยาก

ในแอป React หรือ Next.js ทั่วไป ฟอร์ม "สร้างโปรเจกต์" (create a project) แบบง่ายๆ จะต้องผ่านขั้นตอนที่ต่อเนื่องกันเป็นทอดๆ ตั้งแต่การสร้างไฟล์ API route, การส่ง fetch request จากเบราว์เซอร์, การจัดการสถานะ loading และ error, การตั้งค่า CORS headers และสุดท้ายคือการอัปเดตฝั่ง client เพื่อแสดงข้อมูลใหม่ แต่ละขั้นตอนล้วนเพิ่มทั้งจำนวนไฟล์ บรรทัดของโค้ด และจุดที่อาจเกิดข้อผิดพลาด ทีมพัฒนาต้องเสียเวลาในการเชื่อมต่อส่วนประกอบเหล่านี้เข้าด้วยกัน ทั้งที่เป้าหมายเพียงอย่างเดียวคือการเขียนข้อมูลลงในฐานข้อมูล

Server Actions ช่วยลดช่องว่างนี้

Server Actions คือฟังก์ชันแบบ asynchronous ที่รับประกันว่าจะทำงานบนเซิร์ฟเวอร์เท่านั้น การเพิ่ม directive "use server" ไว้ที่ด้านบนสุดของไฟล์จะเป็นการบอก compiler ให้เก็บโค้ดส่วนนี้ไว้ไม่ให้รวมอยู่ใน browser bundle ดังนั้นจึงสามารถเข้าถึงฐานข้อมูล, secrets หรือทรัพยากรที่ใช้เฉพาะบนเซิร์ฟเวอร์ได้อย่างปลอดภัย เนื่องจากฟังก์ชันนี้ทำงานบนเซิร์ฟเวอร์ คอมโพเนนต์จึงสามารถเรียกใช้งานได้โดยตรงผ่าน attribute action บนองค์ประกอบ <form> มาตรฐาน

การกำหนด action

export async function createProject(formData: FormData) {
  const title = formData.get('title') as string;

  if (!title) throw new Error('Title is required');

  await db.project.create({
    data: { title }
  });

  revalidatePath('/dashboard');
}

ฟังก์ชันจะได้รับออบเจกต์ FormData, ทำการตรวจสอบความถูกต้องของ payload, เขียนข้อมูลลงในฐานข้อมูล จากนั้นจึงสั่งให้ Next.js ทำการ refresh หน้า /dashboard เพื่อให้ UI แสดงโปรเจกต์ใหม่โดยไม่ต้องโหลดหน้าเว็บใหม่ทั้งหมด (full reload)

การเชื่อมต่อกับ UI

export default function NewProjectForm() {
  return (
    <form action={createProject}>
      <input type="text" name="title" required />
      <SubmitButton />
    </form>
  );
}

เมื่อผู้ใช้คลิกปุ่ม submit เบราว์เซอร์จะส่งข้อมูลฟอร์มไปยังฟังก์ชัน createProject ที่ฝั่งเซิร์ฟเวอร์ เนื่องจากสิ่งนี้ใช้พฤติกรรมมาตรฐานของ HTML form การส่งข้อมูลจึงยังคงทำงานได้แม้ว่า JavaScript จะยังโหลดไม่เสร็จ ซึ่งช่วยเพิ่มประสิทธิภาพในความรู้สึก (perceived performance) เมื่อใช้งานผ่านการเชื่อมต่อที่ช้า

สิ่งที่ทีมจะได้รับ

• ไฟล์น้อยลง – ไม่ต้องมีไฟล์ pages/api หรือ app/api แยกต่างหากสำหรับแต่ละ endpoint
• การเชื่อมต่อน้อยลง – ไม่ต้องเรียก fetch ด้วยตัวเอง และไม่ต้องจัดการ CORS อย่างชัดเจน
• ความปลอดภัยด้าน Type ในตัว – signature ของฟังก์ชันจะถูกใช้ร่วมกันทั้งฝั่ง server และ client ทำให้ TypeScript สามารถตรวจพบความไม่สอดคล้องกันได้ตั้งแต่เนิ่นๆ
• ความได้เปรียบด้านประสิทธิภาพ – คำขอจะส่งตรงไปยังฟังก์ชันบนเซิร์ฟเวอร์ โดยข้ามขั้นตอนการส่งผ่านเครือข่าย (network hop) ส่วนเกินที่การเรียก fetch ฝั่ง client ต้องมี

ข้อจำกัดและข้อควรระวัง

Server Actions ยังคงเป็นฟีเจอร์ที่อยู่ในช่วงเริ่มต้น โดยสามารถเป็นได้เพียงฟังก์ชัน async ที่ระบุด้วย "use server" เท่านั้น และไม่สามารถส่งคืน JavaScript object ใดๆ ตามใจชอบไปยัง client ได้ แต่ต้องจบด้วยการ redirect, การ revalidation หรือการตอบกลับแบบ plain response การดีบั๊ก (debugging) อาจให้ความรู้สึกที่แตกต่างออกไป เพราะ call stack จะกระโดดจากเบราว์เซอร์ไปยัง server runtime ซึ่งอาจทำให้เหล่านักพัฒนาที่คุ้นเคยกับ log ของ API-route แบบดั้งเดิมรู้สึกแปลกใจ นอกจากนี้ เวิร์กโฟลว์ที่ซับซ้อนซึ่งเกี่ยวข้องกับ microservices หลายตัว หรือต้องการ HTTP status code ที่ละเอียดแม่นยำ อาจยังคงต้องใช้ API endpoint แบบเดิม

สิ่งที่ควรจับตามอง

Next.js มีแนวโน้มที่จะขยาย API ของ Server Actions ในเวอร์ชันต่อๆ ไป โดยจะเพิ่มการรองรับประเภทการตอบกลับ (response types) ที่มากขึ้น และการรวมเข้ากับเครื่องมือต่างๆ (tooling integration) ที่ดีขึ้น ผู้ที่เริ่มใช้งานเร็ว (early adopters) ควรติดตาม changelog ของ framework และความคิดเห็นจากชุมชนเพื่อประเมินความเสถียรก่อนที่จะนำฟีเจอร์ที่สำคัญต่อธุรกิจ (mission-critical) มาใช้ในเส้นทางนี้ การตรวจสอบขนาดของ bundle และตัวชี้วัดการเรนเดอร์ฝั่งเซิร์ฟเวอร์ (server-rendering metrics) ยังสามารถช่วยให้ทราบว่าการลดโค้ดฝั่ง client ลงนั้น จะช่วยลด latency ได้อย่างเห็นได้ชัดสำหรับรูปแบบการใช้งาน (traffic patterns) เฉพาะของคุณหรือไม่

บทสรุป

ด้วยการอนุญาตให้คอมโพเนนต์เรียกใช้ฟังก์ชันที่ทำงานเฉพาะบนเซิร์ฟเวอร์ได้โดยตรง Next.js Server Actions จึงช่วยกำจัด "ตัวกลาง" ที่สร้างความยุ่งยากให้กับโปรเจกต์ React มาอย่างยาวนาน ผลลัพธ์ที่ได้คือโค้ดที่สะอาดขึ้น, การรับส่งข้อมูลที่รวดเร็วขึ้น และประสบการณ์การพัฒนาที่ราบรื่นยิ่งขึ้น—ตราบใดที่ข้อจำกัดในปัจจุบันของฟีเจอร์นี้สอดคล้องกับความต้องการของโปรเจกต์