M

MLOG

Bahasa Indonesia

Jelajahi React Server Actions, fitur canggih untuk menangani pengiriman formulir dan mutasi data langsung di server, menyederhanakan pengembangan React dan meningkatkan keamanan.

React Server Actions: Pemrosesan Formulir Sisi Server Disederhanakan

React Server Actions, diperkenalkan di React 18 dan ditingkatkan secara signifikan di Next.js, menawarkan pendekatan revolusioner untuk menangani pengiriman formulir dan mutasi data langsung di server. Fitur canggih ini menyederhanakan proses pengembangan, meningkatkan keamanan, dan memperbaiki kinerja dibandingkan dengan pengambilan dan manipulasi data sisi klien tradisional.

Apa itu React Server Actions?

Server Actions adalah fungsi asinkron yang berjalan di server dan dapat dipanggil langsung dari komponen React. Fitur ini memungkinkan Anda untuk melakukan tugas-tugas sisi server, seperti:

Keuntungan utama dari Server Actions adalah memungkinkan Anda untuk menulis kode sisi server di dalam komponen React Anda, menghilangkan kebutuhan akan rute API terpisah dan logika pengambilan data sisi klien yang kompleks. Kolokasi antara UI dan logika sisi server ini menghasilkan basis kode yang lebih mudah dipelihara dan efisien.

Manfaat Menggunakan React Server Actions

Menggunakan React Server Actions memberikan beberapa manfaat signifikan:

Pengembangan yang Disederhanakan

Server Actions mengurangi kode boilerplate dengan memungkinkan Anda menangani pengiriman formulir dan mutasi data langsung di dalam komponen React Anda. Ini menghilangkan kebutuhan akan endpoint API terpisah dan logika pengambilan data sisi klien yang kompleks, menyederhanakan proses pengembangan dan membuat kode Anda lebih mudah dipahami dan dipelihara. Pertimbangkan formulir kontak sederhana. Tanpa Server Actions, Anda memerlukan rute API terpisah untuk menangani pengiriman formulir, JavaScript sisi klien untuk mengirim data, dan logika penanganan kesalahan di sisi klien dan server. Dengan Server Actions, semua ini dapat ditangani di dalam komponen itu sendiri.

Keamanan yang Ditingkatkan

Dengan menjalankan kode di server, Server Actions mengurangi permukaan serangan aplikasi Anda. Data sensitif dan logika bisnis dijauhkan dari klien, mencegah pengguna jahat merusaknya. Sebagai contoh, kredensial basis data atau kunci API tidak pernah terekspos dalam kode sisi klien. Semua interaksi basis data terjadi di server, mengurangi risiko injeksi SQL atau akses data yang tidak sah.

Kinerja yang Ditingkatkan

Server Actions dapat meningkatkan kinerja dengan mengurangi jumlah JavaScript yang perlu diunduh dan dieksekusi di klien. Ini sangat bermanfaat bagi pengguna di perangkat berdaya rendah atau dengan koneksi internet lambat. Pemrosesan data terjadi di server, dan hanya pembaruan UI yang diperlukan yang dikirim ke klien, menghasilkan pemuatan halaman yang lebih cepat dan pengalaman pengguna yang lebih lancar.

Pembaruan Optimistis

Server Actions terintegrasi dengan mulus dengan Suspense dan Transitions dari React, memungkinkan pembaruan optimistis. Pembaruan optimistis memungkinkan Anda untuk memperbarui UI secara langsung, bahkan sebelum server mengonfirmasi tindakan tersebut. Ini memberikan pengalaman pengguna yang lebih responsif dan menarik, karena pengguna tidak perlu menunggu server merespons sebelum melihat hasil tindakan mereka. Dalam e-commerce, menambahkan item ke keranjang belanja dapat ditampilkan segera sementara server mengonfirmasi penambahan di latar belakang.

Peningkatan Progresif

Server Actions mendukung peningkatan progresif, yang berarti aplikasi Anda tetap dapat berfungsi meskipun JavaScript dinonaktifkan atau gagal dimuat. Ketika JavaScript dinonaktifkan, formulir akan dikirim sebagai formulir HTML tradisional, dan server akan menangani pengiriman dan mengarahkan pengguna ke halaman baru. Ini memastikan bahwa aplikasi Anda tetap dapat diakses oleh semua pengguna, terlepas dari konfigurasi peramban atau kondisi jaringan mereka. Hal ini sangat penting untuk aksesibilitas dan SEO.

Cara Menggunakan React Server Actions

Untuk menggunakan React Server Actions, Anda perlu menggunakan kerangka kerja yang mendukungnya, seperti Next.js. Berikut adalah panduan langkah demi langkah:

1. Definisikan Server Action

Buat fungsi asinkron yang akan berjalan di server. Fungsi ini harus menangani logika yang ingin Anda eksekusi di server, seperti memperbarui basis data atau memanggil API. Tandai fungsi dengan direktif `"use server"` di bagian atas untuk menunjukkan bahwa itu adalah Server Action. Direktif ini memberitahu kompiler React untuk memperlakukan fungsi tersebut sebagai fungsi sisi server dan secara otomatis menangani serialisasi dan deserialisasi data antara klien dan server.

// app/actions.js
'use server'

import { revalidatePath } from 'next/cache';
import { saveMessage } from './db';

export async function createMessage(prevState, formData) {
  const message = formData.get('message');

  try {
    await saveMessage(message);
    revalidatePath('/'); // Clear the route cache
    return { message: 'Message saved successfully!' };
  } catch (e) {
    return { message: 'Failed to save message' };
  }
}

Penjelasan:

2. Impor dan Gunakan Server Action di Komponen Anda

Impor Server Action ke dalam komponen React Anda dan gunakan sebagai prop `action` pada elemen formulir. Hook `useFormState` dapat digunakan untuk mengelola state formulir dan menampilkan umpan balik kepada pengguna.

// app/page.jsx
'use client';

import { useFormState } from 'react-dom';
import { createMessage } from './actions';

export default function Home() {
  const [state, formAction] = useFormState(createMessage, {message: ''});

  return (
    

      
      
      
      {state?.message && 
{state.message}
}
    

  );
}

Penjelasan:

3. Menangani Data Formulir

Di dalam Server Action, Anda dapat mengakses data formulir menggunakan `FormData` API. API ini menyediakan cara yang mudah untuk mengakses nilai-nilai dari field formulir.

'use server'

export async function createMessage(prevState, formData) {
  const message = formData.get('message');

  // ...
}

4. Menangani Kesalahan

Gunakan blok `try...catch` untuk menangani kesalahan yang mungkin terjadi selama eksekusi Server Action. Kembalikan pesan kesalahan dalam objek state untuk menampilkannya kepada pengguna.

'use server'

export async function createMessage(prevState, formData) {
  const message = formData.get('message');

  try {
    // ...
  } catch (e) {
    return { message: 'Failed to save message' };
  }
}

5. Memvalidasi Ulang Data

Setelah Server Action berhasil memutasi data, Anda mungkin perlu memvalidasi ulang cache data untuk memastikan bahwa UI mencerminkan perubahan terbaru. Gunakan fungsi `revalidatePath` atau `revalidateTag` dari `next/cache` untuk memvalidasi ulang path atau tag tertentu.

'use server'

import { revalidatePath } from 'next/cache';

export async function createMessage(prevState, formData) {
  // ...
  revalidatePath('/'); // Clear the route cache
  // ...
}

Penggunaan Tingkat Lanjut

Memutasi Data

Server Actions sangat cocok untuk memutasi data, seperti memperbarui basis data atau API eksternal. Anda dapat menggunakan Server Actions untuk menangani mutasi data kompleks yang memerlukan logika sisi server, seperti memvalidasi data, melakukan perhitungan, atau berinteraksi dengan beberapa sumber data. Pertimbangkan skenario di mana Anda perlu memperbarui profil pengguna dan mengirim email konfirmasi. Server Action dapat menangani pembaruan basis data dan proses pengiriman email dalam satu operasi atomik tunggal.

Autentikasi dan Otorisasi

Server Actions dapat digunakan untuk menangani autentikasi dan otorisasi. Dengan melakukan pemeriksaan autentikasi dan otorisasi di server, Anda dapat memastikan bahwa hanya pengguna yang berwenang yang memiliki akses ke data dan fungsionalitas sensitif. Anda dapat menggunakan Server Actions untuk menangani login pengguna, pendaftaran, dan pengaturan ulang kata sandi. Sebagai contoh, Server Action dapat memverifikasi kredensial pengguna terhadap basis data dan mengembalikan token yang dapat digunakan untuk mengautentikasi permintaan berikutnya.

Edge Functions

Server Actions dapat di-deploy sebagai Edge Functions, yang berjalan di jaringan server global yang dekat dengan pengguna Anda. Ini dapat secara signifikan mengurangi latensi dan meningkatkan kinerja, terutama untuk pengguna di lokasi yang tersebar secara geografis. Edge Functions ideal untuk menangani Server Actions yang memerlukan latensi rendah, seperti pembaruan data waktu nyata atau pengiriman konten yang dipersonalisasi. Next.js menyediakan dukungan bawaan untuk men-deploy Server Actions sebagai Edge Functions.

Streaming

Server Actions mendukung streaming, yang memungkinkan Anda mengirim data ke klien dalam potongan-potongan saat tersedia. Ini dapat meningkatkan kinerja yang dirasakan dari aplikasi Anda, terutama untuk Server Actions yang membutuhkan waktu lama untuk dieksekusi. Streaming sangat berguna untuk menangani kumpulan data besar atau perhitungan yang kompleks. Sebagai contoh, Anda dapat melakukan streaming hasil pencarian ke klien saat data diambil dari basis data, memberikan pengalaman pengguna yang lebih responsif.

Praktik Terbaik

Berikut adalah beberapa praktik terbaik yang harus diikuti saat menggunakan React Server Actions:

Contoh Dunia Nyata

Mari kita pertimbangkan beberapa contoh dunia nyata tentang bagaimana React Server Actions dapat digunakan dalam berbagai jenis aplikasi:

Aplikasi E-commerce

Aplikasi Media Sosial

Sistem Manajemen Konten (CMS)

Pertimbangan Internasionalisasi

Saat mengembangkan aplikasi untuk audiens global, penting untuk mempertimbangkan internasionalisasi (i18n) dan lokalisasi (l10n). Berikut adalah beberapa pertimbangan untuk menggunakan React Server Actions dalam aplikasi yang diinternasionalisasi:

Sebagai contoh, saat memproses formulir yang memerlukan input tanggal, Server Action dapat menggunakan `Intl.DateTimeFormat` API untuk mengurai tanggal sesuai dengan lokal pengguna, memastikan bahwa tanggal ditafsirkan dengan benar terlepas dari pengaturan regional pengguna.

Kesimpulan

React Server Actions adalah alat yang ampuh untuk menyederhanakan pemrosesan formulir sisi server dan mutasi data dalam aplikasi React. Dengan memungkinkan Anda menulis kode sisi server langsung di dalam komponen React, Server Actions mengurangi kode boilerplate, meningkatkan keamanan, meningkatkan kinerja, dan memungkinkan pembaruan optimistis. Dengan mengikuti praktik terbaik yang diuraikan dalam panduan ini, Anda dapat memanfaatkan Server Actions untuk membangun aplikasi React yang lebih tangguh, terukur, dan mudah dipelihara. Seiring dengan terus berkembangnya React, Server Actions tidak diragukan lagi akan memainkan peran yang semakin penting di masa depan pengembangan web.