การดำเนินการของแบบฟอร์ม: แทนที่เส้นทาง API สำหรับการเปลี่ยนแปลงข้อมูล

ในแอปพลิเคชัน Next.js แบบดั้งเดิม การส่งแบบฟอร์มต้องใช้คอมโพเนนต์ฝั่งไคลเอนต์ที่มีตัวจัดการ onSubmit ซึ่งเรียกใช้ fetch() เพื่อส่งข้อมูลด้วย POST ไปยังเส้นทางส่วนติดต่อโปรแกรมประยุกต์ รูปแบบนี้ใช้งานได้ แต่ต้องเขียนและดูแลทั้งตรรกะการดึงข้อมูลฝั่งไคลเอนต์และตัวจัดการเส้นทางฝั่งเซิร์ฟเวอร์แยกจากกัน

เมื่อใช้แอ็กชันฝั่งเซิร์ฟเวอร์ คุณจะแทนที่การเรียกใช้การดึงข้อมูลและเส้นทางส่วนติดต่อโปรแกรมประยุกต์ด้วยฟังก์ชันเดียว องค์ประกอบแบบฟอร์มจะรับแอ็กชันฝั่งเซิร์ฟเวอร์เป็นพร็อพ action: <form action={serverAction}> รีแอ็กต์จะดักจับการส่งแบบฟอร์มและเรียกใช้แอ็กชันพร้อมข้อมูลแบบฟอร์มโดยอัตโนมัติ

แอ็กชันฝั่งเซิร์ฟเวอร์จะได้รับอ็อบเจ็กต์ FormData เป็นอาร์กิวเมนต์โดยอัตโนมัติเมื่อถูกเรียกใช้จากแบบฟอร์ม คุณเข้าถึงฟิลด์แต่ละรายการได้ด้วย formData.get('email') ซึ่งส่งคืนค่าเป็นสตริง เมธอดมาตรฐานทั้งหมดของ FormData พร้อมใช้งาน รวมถึง getAll() สำหรับฟิลด์ที่เลือกได้หลายรายการ

แอ็กชันฝั่งเซิร์ฟเวอร์สามารถส่งคืนค่าที่ทำให้เป็นอนุกรมได้ เพื่อให้ไคลเอนต์นำไปใช้ การส่งคืนอ็อบเจ็กต์ข้อผิดพลาดอย่าง { error: 'Email already exists' } หรือธงแสดงความสำเร็จอย่าง { success: true } ช่วยให้ไคลเอนต์อัปเดตส่วนติดต่อผู้ใช้ได้ตามความเหมาะสมโดยไม่ต้องโหลดทั้งหน้าใหม่

เนื่องจากแอ็กชันของแบบฟอร์มเป็นแอ็กชันฝั่งเซิร์ฟเวอร์ คอมโพเนนต์หน้าที่มีแบบฟอร์มจึงไม่จำเป็นต้องเป็นคอมโพเนนต์ฝั่งไคลเอนต์ เซิร์ฟเวอร์จะแสดงผลแบบฟอร์มเป็น HTML แบบคงที่ และเฉพาะส่วนที่โต้ตอบได้ เช่น การแสดงข้อผิดพลาดเท่านั้นที่ต้องใช้ JavaScript ฝั่งไคลเอนต์ วิธีนี้ช่วยลดขนาดชุดโปรแกรมฝั่งไคลเอนต์ได้อย่างมาก

แบบฟอร์มที่มี action={serverAction} ทำงานได้แม้ไม่ได้เปิดใช้ JavaScript เบราว์เซอร์จะส่ง POST แบบฟอร์ม HTML มาตรฐาน เซิร์ฟเวอร์จะเรียกใช้แอ็กชัน และเซิร์ฟเวอร์จะส่งหน้าที่อัปเดตแล้วกลับมา การเพิ่มประสิทธิภาพแบบก้าวหน้าอย่างแท้จริงนี้ทำให้แบบฟอร์มยังทำงานได้อย่างเหมาะสมในทุกสภาพแวดล้อม

หลังจากแอ็กชันฝั่งเซิร์ฟเวอร์เปลี่ยนแปลงข้อมูล ข้อมูลหน้าที่แคชไว้จะต้องได้รับการปรับปรุง การเรียกใช้ revalidatePath('/dashboard') ภายในแอ็กชันจะทำให้แคชของ Next.js สำหรับเส้นทางนั้นไม่ถูกต้อง ส่งผลให้คำขอถัดไปดึงข้อมูลล่าสุด วิธีนี้เป็นแนวทางมาตรฐานในการทำให้หน้าที่แสดงผลบนเซิร์ฟเวอร์เป็นปัจจุบันหลังการเปลี่ยนแปลงข้อมูล

revalidateTag('user-data') ให้การทำให้แคชไม่ถูกต้องที่ละเอียดกว่า revalidatePath คุณติดป้ายกำกับการเรียกดึงข้อมูลด้วย next: { tags: ['user-data'] } แล้วทำให้ข้อมูลที่มีป้ายกำกับทั้งหมดไม่ถูกต้องพร้อมกันจากภายในแอ็กชันฝั่งเซิร์ฟเวอร์ได้ โดยไม่ขึ้นกับว่าเส้นทางใดแสดงข้อมูลนั้น

แอ็กชันฝั่งเซิร์ฟเวอร์สามารถนำผู้ใช้ไปยังหน้าใหม่หลังการเปลี่ยนแปลงข้อมูลสำเร็จได้ โดยเรียกใช้ redirect('/success') จากโมดูล next/navigation การนำทางนี้จัดการบนเซิร์ฟเวอร์ ซึ่งหมายความว่าเบราว์เซอร์จะได้รับการตอบกลับสำหรับการนำทางที่ถูกต้อง แทนการนำทางโดยไคลเอนต์

แอ็กชันฝั่งเซิร์ฟเวอร์ไม่ได้จำกัดอยู่แค่การส่งแบบฟอร์ม สำหรับการคลิกปุ่มและตัวกระตุ้นอื่นที่ไม่ใช่แบบฟอร์ม ให้ครอบการเรียกใช้แอ็กชันด้วย startTransition(() => action(arg)) การทำเช่นนี้จะระบุว่าการนำทางเป็นการเปลี่ยนผ่าน ทำให้รีแอ็กต์คงส่วนติดต่อผู้ใช้ปัจจุบันไว้ได้ขณะที่แอ็กชันทำงานบนเซิร์ฟเวอร์

แอ็กชันฝั่งเซิร์ฟเวอร์เป็นตำแหน่งที่เหมาะสมสำหรับการตรวจสอบความถูกต้องฝั่งเซิร์ฟเวอร์ ให้ตรวจสอบฟิลด์ของ FormData ส่งคืนข้อผิดพลาดจากการตรวจสอบหากไม่ผ่าน และดำเนินการเปลี่ยนแปลงข้อมูลต่อเมื่อทุกฟิลด์ถูกต้อง ไลบรารีอย่างซอดทำงานร่วมกันได้ดีในกรณีนี้ โดยแปลง FormData ให้ตรงกับแบบแผนที่มีชนิดข้อมูล แล้วส่งคืนแผนผังข้อผิดพลาดเมื่อไม่ผ่านการตรวจสอบ

เมื่อถูกเรียกใช้จากการส่งแบบฟอร์ม แอ็กชันฝั่งเซิร์ฟเวอร์จะได้รับอะไรเป็นอาร์กิวเมนต์

แอ็กชันฝั่งเซิร์ฟเวอร์เข้ามาแทนที่รูปแบบการดึงข้อมูลร่วมกับเส้นทางส่วนติดต่อโปรแกรมประยุกต์สำหรับการเปลี่ยนแปลงข้อมูลจากแบบฟอร์ม พร็อพ action ของแบบฟอร์มรับแอ็กชันฝั่งเซิร์ฟเวอร์ได้โดยตรง โดยแอ็กชันจะได้รับอ็อบเจ็กต์ FormData แอ็กชันส่งคืนผลลัพธ์ที่ทำให้เป็นอนุกรมได้สำหรับการอัปเดตส่วนติดต่อผู้ใช้ฝั่งไคลเอนต์ รองรับ revalidatePath และ revalidateTag สำหรับการทำให้แคชไม่ถูกต้อง และทำงานแบบก้าวหน้าได้โดยไม่ต้องใช้ JavaScript