Kapan Pakai yang Mana: Server Actions vs API Routes di Next.js

Lagi ngerjain project Next.js, dan nemu pertanyaan yang sebenernya simpel tapi nggak—nggak salah lagi, hehe.

"Ini harusnya pakai Server Actions atau API Routes?"

Keduanya bisa dipake buat hal yang mirip, kayak ngirim data, ngolah sesuatu di server, balik hasilnya ke client. Tapi ternyata ada perbedaan yang cukup nentuin mana yang lebih tepat dipakai di situasi tertentu.

API Routes itu udah lama ada di Next.js. Cara kerjanya seperti endpoint pada umumnya—ada URL-nya, bisa di-hit pakai fetch, dan bisa diakses dari mana aja, termasuk dari aplikasi atau service lain di luar Next.js-nya sendiri.

Server Actions lebih baru. Ini fungsi yang jalan di server, tapi bisa dipanggil langsung dari komponen, tanpa perlu bikin endpoint terpisah, tanpa perlu fetch manual. Next.js yang ngurusin komunikasinya di balik layar.

Perbedaan yang paling kerasa ada di dua hal.

Pertama, hal. Kedua, hal. Hehe, becanda. Ulang.

Pertama, konsumsi. Kalau endpoint-nya bakal dipakai service lain, atau perlu diakses dari luar aplikasi, API Routes lebih masuk akal karena punya URL yang jelas. Server Actions nggak punya URL publik, karena dia lebih ke "fungsi server yang dipanggil dari dalam."

Kedua, kompleksitas. Buat operasi yang langsung terikat sama UI, kayak submit form, update data, hapus item, Server Actions jauh lebih ringkas. Nggak perlu bikin file route terpisah, nggak perlu atur method, langsung panggil fungsinya.

Dibanding harus bikin /api/posts/[id]/route.ts, atur DELETE method, terus fetch dari komponen, untuk kasus sesimpel ini, Server Actions menang jauh dari sisi keterbacaan.

Bukan berarti salah satunya lebih baik secara absolut. API Routes tetap relevan, terutama kalau aplikasinya butuh endpoint yang bisa dikonsumsi lebih dari satu client. Tapi untuk operasi internal yang terikat langsung sama komponen, Server Actions bikin kodenya jadi lebih bersih.

Hal yang sebenernya bisa dicari di dokumentasi, tapi lebih ngena kalau nemunya pas lagi beneran butuh.