Stable-nya Server Actions di Next 14 membuat banyak orang (termasuk saya yang noob ini) berpikir apa metode lain masih dibutuhkan? soalnya muncul pertanyaan semacam "Yah, sekarang ada server actions dan sesuatu seperti Next.js, apakah kita masih perlu hal-hal seperti trpc, GraphQL, atau REST?" Dan sebenarnya, itu pertanyaan yang cukup rumit.
Nah, di artikel ini, kita bakal bahas perbandingan server actions dengan trpc, GraphQL, dan REST, disclaimer, saya bukan ahlinya, ini hanya pengalaman saya dalam menggunakan beberapa perbedaan metode-metode ini. Yuk, langsung aja kita bahas.
Pengenalan Empat Framework yang Berbeda
Server Actions
Setiap fungsi yang akan dipanggil ditulis di kode yang sama dengan kode klien, hanya tinggal pake 'use server' diatasnya kalau di Next.js 14, Alurnya diatur sama framework seperti Next.js, Remix, Solid Start, atau Quick. Kita bisa mengasumsikan dengan aman bahwa semua fungsi yang ditulis dibawah pragma 'use server' akan di-invoke di server.
trpc (Typesafe Remote Procedure Calls)
Dengan framework ini, kita mendefinisikan endpoint dengan yang namanya procedure. Kurang lebih seperti fungsi biasa, dimana semua definisi types dari API akan otomatis didefine, sehingga kita tidak perlu lagi secara manual mendifinisikan types apa yang akan direturn maupun yang harus dikirim sebagai parameter ke server
GraphQL
Bahasa query yang dibuat oleh Meta sehingga kita tidak perlu lagi membuat satu-per-satu endpoint yang dibutuhkan.
REST (Representational State Transfer)
Gaya arsitektur yang mengatur resource dalam struktur hirarkis. Setiap resource yang kita minta harus spesifik dibuat endpointnya.
Perbandingan Kelebihan dan Keterbatasan
Setupnya:
Server Actions: Udah out of the box. Langsung bisa dipake di Server Component
tRPC: Kalau sudah monorepo / fullstack, ini sangat mudah untuk disetup, jadi karena cara manggil procedure di tRPC ini sama kek manggil fungsi biasa, selama konteks codingannya bisa dishare ke FrontEnd, akan sangat mudah. Dokumentasinya juga bagus.
GraphQL: Bisa agak susah disetup. Perlu konfigurasi endpoint API.
REST: Gampang-gampang susah si ya. Kalau di Next, Remix, atau framework fullstack biasanya sudah tinggal define endpoint-nya. Tapi kalau harus setup dari awal, lumayan butuh waktu juga buat ngesetup boilerplatenya. Misalnya di Express, harus install beberapa plugin dulu seperti dotenv() atau cors().
Kemudahan Penggunaan:
- Server Actions: Gampang dipakai kalau paradigma kodingannya udah server-first. Artinya, komponen-komponennya udah bisa full dirender di server. Cukup manggil fungsi aja jadinya, nanti framework yang urusin mekanik request dan responnya.
- tRPC: Agak advanced, harus paham dengan Context dan Typescript. Tapi kalau sudah paham konsepnya, tinggak sedikit adaptasi aja, apalagi kalau terbiasa dengan asynchronous programming. Untuk apa? Misalnya, gimana cara manggil dan ngehandle procedure serta query dan mutation.
- GraphQL: Sama seperti tRPC, kalau kamu datang dari kebiasaan mengconsume API Rest, butuh waktu buat baca-baca dokumentasi belajar bahasa querynya.
- REST: Nyaman buat query sederhana. Mau list produk? tinggal GET /products, mau posting makanan baru di blog? tinggal POST. Tapi untuk query yang kompleks agak susah, karena harus ngedefine dan manggil route satu per satu.
Mutasi Data:
- Server Actions: Gampang! mau update data user ketika dia udah purchase produk? bisa langsung ngequery database dari kodingan frontend!.
- tRPC: Agak ribet sih, harus ngedefine procedure mutation dulu baru dari procedure itu kita bisa mutasi data. Procedure ini harus dipanggil frontend nantinya.
- GraphQL: Gampang kalau udah paham dengan bahasa querynya.
- REST: Gampang buat mutasi tapi kurang standar, karena struktur API mesti didefinisiin sendiri.
Query:
Server Actions: Cocok, hasil query bisa langsung dikirim berbarengan dengan client. Jadi ketika client request ui frontend, data server juga bisa langsung dikirim sekalian, jadi minimalisir waterfall dan memperbaiki Web Vitals.
trpc, GraphQL: Cocok buat kueri. Hooks atau bahasa querynya GraphQL memudahkan proses ini.
REST: Gampang-gampang susah, bikin endpoint GET gampang, tapi kalau butuh data lain harus bikin endpoint baru.
Keamanan Tipe:
tRpc: Udah aman secara otomatis.
GraphQL: Bisa generate tipe berdasarkan skema, jadi cukup aman secara tipe.
REST: Kurang aman secara otomatis. Perlu setelan tambahan atau definisi tipe manual.
Server Actions: Aman tergantung cara makenya, karena pada akhirnya server actions sama seperti fungsi lain, hanya dipanggil di server.
Kompatibilitas:
Server Actions: Terbatas kompatibilitasnya di luar framework yang disupport.
tRPC: Kompatibel hanya di aplikasi berbasis TypeScript (misalnya React Native dan web).
GraphQL: Kompatibel dengan sebagian besar klien karena mengikuti API standar.
REST: Kompatibel dengan sebagian besar klien.
JavaScript:
Server Actions: Bisa jalan tanpa JavaScript di client, karena semua invocations dipanggil di server.
trpc, GraphQL, REST: Perlu JavaScript di client.
Rekomendasi
Berdasarkan keadaan terkini, menurutku ada beberapa rekomendasi:
Buat aplikasi web Next.js yang sederhana, pake kombinasi query di server pake React Server Components dan server actions adalah pendekatan paling OK.
Kalau butuh dukungan API yang bisa diconsume mobile atau desktop, terutama di aplikasi berbasis TypeScript, pertimbangkan trpc.
Buat aplikasi internal atau internet, GraphQL menonjol berkat dukungan server dan klien yang kuat.
REST OK buat kueri sederhana tapi kurang type-safe dibanding opsi lain.
Tapi, keputusan akhir tetap di tangan kamu. Pilih yang sesuai dengan preferensi dan kenyamanan kamu.
Selamat Ngoding!