Server Actions di React 19 dan Next.js

Tindakan Peladen adalah fungsi asinkron yang dijalankan di peladen, bukan di peramban. Fungsi ini ditandai dengan direktif 'use server' yang ditempatkan di bagian atas berkas atau di bagian atas isi fungsi, yang memberi sinyal kepada kerangka kerja bahwa fungsi ini tidak boleh dijalankan di sisi klien.

Karena Tindakan Server dijalankan di server, tindakan tersebut memiliki akses ke seluruh konteks server: koneksi basis data, rahasia lingkungan, data sesi, dan sumber daya sistem berkas. Hal ini pada dasarnya berbeda dari komponen klien, yang hanya dapat mengakses hal-hal yang disediakan oleh peramban.

Ketika komponen klien memanggil Tindakan Server, Next.js secara otomatis membuat permintaan HTTP POST ke titik akhir RSC khusus. Kerangka kerja menangani seluruh serialisasi argumen dan lapisan transportasi, sehingga Anda tidak perlu menulis panggilan fetch() secara manual untuk mutasi ini.

Tindakan Server menggantikan kebutuhan akan rute API dalam banyak skenario mutasi. Tindakan itu sendiri adalah titik akhirnya—Anda mendefinisikan logikanya sekali sebagai fungsi server, lalu memanggilnya langsung dari komponen klien seolah-olah itu adalah fungsi lokal.

Tindakan Server awalnya merupakan konsep khusus Next.js, tetapi React 19 meningkatkannya menjadi fitur React kelas utama. Artinya, pembundel dan kerangka kerja selain Next.js dapat menerapkan pola yang sama dengan mengikuti spesifikasi React.

Tindakan Server bersifat eksperimental dalam React 19 RC, tetapi telah stabil di App Router Next.js 14+ sejak diperkenalkan. Jika Anda sedang membangun aplikasi produksi dengan App Router Next.js saat ini, Tindakan Server merupakan pola yang didukung penuh dan direkomendasikan.

Salah satu properti keamanan terpenting dari Tindakan Server adalah rahasia tidak pernah sampai ke peramban. Variabel lingkungan seperti kata sandi basis data dan kunci API yang digunakan di dalam Tindakan Server tidak pernah disertakan dalam bundel klien, karena isi fungsi tersebut tidak pernah dikirim ke peramban.

Elemen formulir HTML menerima Tindakan Server secara langsung melalui atribut action: <form action={myServerAction}>. React mencegat pengiriman formulir dan memanggil Tindakan Server dengan data formulir, sehingga mutasi di sisi server dapat dilakukan tanpa kode penghubung JavaScript di sisi klien.

Ketika Tindakan Server dipicu, React melakukan serialisasi argumen tindakan ke dalam isi permintaan POST. Server melakukan deserialisasi, menjalankan fungsi, melakukan serialisasi terhadap nilai yang dikembalikan, lalu mengirimkannya kembali. Hanya nilai yang dapat diserialisasi—string, angka, larik, dan objek biasa—yang dapat melewati batas tersebut.

Anda dapat mendefinisikan Tindakan Server pada tingkat modul dalam file yang diawali 'use server', atau secara langsung di dalam Komponen Server dengan menempatkan 'use server' di awal fungsi asinkron. Kedua pendekatan tersebut menghasilkan hal yang sama: fungsi yang dapat dipanggil dan hanya berjalan di server.

Komponen klien mengimpor dan memanggil Tindakan Server seperti fungsi asinkron biasa. Sintaks pemanggilannya identik dengan pemanggilan fungsi asinkron lokal, tetapi eksekusinya berlangsung sepenuhnya di server. Abstraksi ini membuat komponen klien tetap bersih dan bebas dari kode penghubung pengambilan data.

Manakah dari pernyataan berikut yang paling tepat menggambarkan model keamanan Tindakan Server?

Tindakan Server adalah fungsi asinkron di sisi server yang ditandai dengan 'use server'. Tindakan tersebut mempertahankan konteks server seperti koneksi basis data dan rahasia lingkungan. Next.js menangani transportasi HTTP secara otomatis, dan React 19 menjadikannya fitur yang tidak bergantung pada kerangka kerja. Formulir dapat menggunakannya secara langsung melalui atribut action, dan rahasia di dalamnya tidak pernah sampai ke peramban.