การดำเนินการฝั่งเซิร์ฟเวอร์ในรีแอ็กต์ 19 และ Next.js

การทำงานบนเซิร์ฟเวอร์คือฟังก์ชันแบบอะซิงโครนัสที่ทำงานบนเซิร์ฟเวอร์ ไม่ใช่ในเบราว์เซอร์ ฟังก์ชันเหล่านี้ระบุด้วยคำสั่ง 'use server' ซึ่งวางไว้ด้านบนของไฟล์หรือด้านบนของเนื้อความฟังก์ชัน เพื่อส่งสัญญาณให้กรอบงานทราบว่าฟังก์ชันนี้ต้องไม่ทำงานฝั่งไคลเอนต์โดยเด็ดขาด

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

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

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

เดิมทีแอ็กชันฝั่งเซิร์ฟเวอร์เป็นแนวคิดเฉพาะของ Next.js แต่รีแอ็กต์ 19 ยกระดับให้เป็นฟีเจอร์ระดับพื้นฐานของรีแอ็กต์ ซึ่งหมายความว่าตัวรวมชุดและเฟรมเวิร์กอื่นที่ไม่ใช่ Next.js ก็สามารถนำรูปแบบเดียวกันไปใช้งานตามข้อกำหนดของรีแอ็กต์ได้

แอ็กชันฝั่งเซิร์ฟเวอร์ยังอยู่ในขั้นทดลองในรีแอ็กต์ 19 RC แต่มีความเสถียรใน App Router ของ Next.js 14 ขึ้นไปนับตั้งแต่เปิดตัว หากวันนี้คุณกำลังสร้างแอปพลิเคชันสำหรับใช้งานจริงด้วย App Router ของ Next.js แอ็กชันฝั่งเซิร์ฟเวอร์ก็เป็นรูปแบบที่รองรับอย่างเต็มที่และได้รับการแนะนำ

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

องค์ประกอบแบบฟอร์ม HTML รับแอ็กชันฝั่งเซิร์ฟเวอร์ได้โดยตรงผ่านแอตทริบิวต์ action: <form action={myServerAction}> รีแอ็กต์จะดักจับการส่งแบบฟอร์มและเรียกใช้แอ็กชันฝั่งเซิร์ฟเวอร์พร้อมข้อมูลแบบฟอร์ม ทำให้สามารถเปลี่ยนแปลงข้อมูลฝั่งเซิร์ฟเวอร์ได้โดยไม่ต้องวางโครงสร้าง JavaScript ฝั่งไคลเอนต์เพิ่มเติม

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

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

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

ข้อใดต่อไปนี้อธิบายรูปแบบความปลอดภัยของแอ็กชันฝั่งเซิร์ฟเวอร์ได้ดีที่สุด

แอ็กชันฝั่งเซิร์ฟเวอร์คือฟังก์ชันแบบอะซิงโครนัสฝั่งเซิร์ฟเวอร์ที่กำกับด้วย 'use server' ฟังก์ชันเหล่านี้ครอบคลุมบริบทฝั่งเซิร์ฟเวอร์ เช่น การเชื่อมต่อฐานข้อมูลและข้อมูลลับในสภาพแวดล้อม Next.js จัดการการส่งข้อมูล HTTP ให้อัตโนมัติ และรีแอ็กต์ 19 ทำให้ฟังก์ชันเหล่านี้เป็นฟีเจอร์ที่ไม่ขึ้นกับเฟรมเวิร์ก แบบฟอร์มสามารถใช้ฟังก์ชันเหล่านี้ได้โดยตรงผ่านแอตทริบิวต์ action และข้อมูลลับภายในฟังก์ชันจะไม่ไปถึงเบราว์เซอร์