Streaming Respons Server Action React: Respons Formulir Progresif untuk UX yang Lebih Baik

Server Action React memperkenalkan pergeseran paradigma yang kuat dalam cara kita menangani operasi sisi server dalam aplikasi React kita. Salah satu fitur yang paling menarik adalah kemampuan untuk melakukan streaming respons secara progresif, memungkinkan kita memberikan umpan balik langsung kepada pengguna bahkan sebelum seluruh operasi selesai. Ini sangat bermanfaat untuk formulir, di mana kita dapat menciptakan pengalaman pengguna yang lebih responsif dan menarik dengan memperbarui UI saat data tersedia.

Memahami Server Action React

Server Action adalah fungsi asinkron yang berjalan di server, diinisiasi dari komponen React. Mereka menawarkan beberapa keunggulan dibandingkan panggilan API tradisional:

• Keamanan yang Ditingkatkan: Server Action berjalan langsung di server, mengurangi risiko mengekspos data atau logika sensitif ke klien.
• Mengurangi Boilerplate: Mereka menghilangkan kebutuhan untuk rute API terpisah dan logika pengambilan data di klien.
• Performa yang Ditingkatkan: Mereka dapat memanfaatkan rendering sisi server (SSR) dan caching untuk waktu muat awal yang lebih cepat dan performa yang lebih baik.
• Keamanan Tipe (Type Safety): Dengan TypeScript, Server Action menyediakan keamanan tipe end-to-end, memastikan konsistensi data antara klien dan server.

Kekuatan Streaming Respons

Pengiriman formulir tradisional sering kali melibatkan pengiriman semua data ke server, menunggu respons, dan kemudian memperbarui UI sesuai dengan itu. Hal ini dapat menyebabkan penundaan yang dirasakan, terutama untuk formulir yang kompleks atau koneksi jaringan yang lambat. Streaming respons memungkinkan server mengirim data kembali ke klien dalam potongan-potongan, memungkinkan kita untuk memperbarui UI secara progresif saat data tersedia.

Bayangkan sebuah formulir yang menghitung harga yang kompleks berdasarkan input pengguna. Alih-alih menunggu seluruh perhitungan selesai, server dapat melakukan streaming hasil sementara kembali ke klien, memberikan umpan balik waktu nyata kepada pengguna. Ini dapat secara signifikan meningkatkan pengalaman pengguna dan membuat aplikasi terasa lebih responsif.

Mengimplementasikan Respons Formulir Progresif dengan Server Actions

Mari kita lihat contoh cara mengimplementasikan respons formulir progresif dengan Server Action React.

Contoh: Konverter Mata Uang Waktu Nyata

Kita akan membuat formulir konverter mata uang sederhana yang menyediakan pembaruan nilai tukar waktu nyata saat pengguna mengetikkan jumlahnya.

1. Menyiapkan Server Action

Pertama, kita mendefinisikan Server Action yang menangani konversi mata uang.

// server/actions.ts
'use server';

import { unstable_cache } from 'next/cache';

async function getExchangeRate(fromCurrency: string, toCurrency: string): Promise<number> {
  // Mensimulasikan pengambilan nilai tukar dari API eksternal
  console.log(`Fetching exchange rate for ${fromCurrency} to ${toCurrency}`);
  await new Promise(resolve => setTimeout(resolve, 500)); // Mensimulasikan penundaan jaringan
  if (fromCurrency === 'USD' && toCurrency === 'EUR') return 0.92;
  if (fromCurrency === 'EUR' && toCurrency === 'USD') return 1.09;
  if (fromCurrency === 'USD' && toCurrency === 'JPY') return 145;
  if (fromCurrency === 'JPY' && toCurrency === 'USD') return 0.0069;
  throw new Error(`Nilai tukar tidak ditemukan untuk ${fromCurrency} ke ${toCurrency}`);
}

export const convertCurrency = async (prevState: any, formData: FormData) => {
  const fromCurrency = formData.get('fromCurrency') as string;
  const toCurrency = formData.get('toCurrency') as string;
  const amount = Number(formData.get('amount'));

  try {
    if (!fromCurrency || !toCurrency || isNaN(amount)) {
      return { message: 'Harap berikan input yang valid.' };
    }

    // Mensimulasikan streaming respons
    await new Promise(resolve => setTimeout(resolve, 250));
    const exchangeRate = await unstable_cache(
      async () => getExchangeRate(fromCurrency, toCurrency),
      [`exchange-rate-${fromCurrency}-${toCurrency}`],
      { tags: [`exchange-rate-${fromCurrency}-${toCurrency}`] }
    )();

    await new Promise(resolve => setTimeout(resolve, 250));
    const convertedAmount = amount * exchangeRate;

    return { message: `Jumlah yang dikonversi: ${convertedAmount.toFixed(2)} ${toCurrency}` };
  } catch (e: any) {
    console.error(e);
    return { message: 'Gagal mengonversi mata uang.' };
  }
};

Dalam contoh ini, Server Action convertCurrency mengambil nilai tukar (disimulasikan dengan penundaan) dan menghitung jumlah yang dikonversi. Kami telah menambahkan penundaan buatan menggunakan setTimeout untuk mensimulasikan latensi jaringan dan mendemonstrasikan efek streaming.

2. Mengimplementasikan Komponen React

Selanjutnya, kita membuat komponen React yang menggunakan Server Action tersebut.

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

import { useState, useTransition } from 'react';
import { convertCurrency } from './server/actions';
import { useFormState } from 'react-dom';

export default function CurrencyConverter() {
  const [fromCurrency, setFromCurrency] = useState('USD');
  const [toCurrency, setToCurrency] = useState('EUR');
  const [amount, setAmount] = useState('');
  const [isPending, startTransition] = useTransition();
  const [state, formAction] = useFormState(convertCurrency, { message: '' });

  const handleSubmit = async (event: React.FormEvent) => {
    event.preventDefault();
    startTransition(() => {
      formAction(new FormData(event.target as HTMLFormElement));
    });
  };

  return (
    <div>
      <h2>Konverter Mata Uang Waktu Nyata</h2>
      <form action={handleSubmit}>
        <label htmlFor="fromCurrency">Dari:</label>
        <select id="fromCurrency" name="fromCurrency" value={fromCurrency} onChange={(e) => setFromCurrency(e.target.value)}>
          <option value="USD">USD</option>
          <option value="EUR">EUR</option>
          <option value="JPY">JPY</option>
        </select>

        <label htmlFor="toCurrency">Ke:</label>
        <select id="toCurrency" name="toCurrency" value={toCurrency} onChange={(e) => setToCurrency(e.target.value)}>
          <option value="EUR">EUR</option>
          <option value="USD">USD</option>
          <option value="JPY">JPY</option>
        </select>

        <label htmlFor="amount">Jumlah:</label>
        <input
          type="number"
          id="amount"
          name="amount"
          value={amount}
          onChange={(e) => setAmount(e.target.value)}
        />

        <button type="submit" disabled={isPending}>
          {isPending ? 'Mengonversi...' : 'Konversi'}
        </button>
      </form>
      <p>{state.message}</p>
    </div>
  );
}

Poin-poin penting:

• Kita menggunakan hook useFormState untuk mengelola status formulir dan memanggil Server Action.
• Status isPending dari useTransition menonaktifkan tombol kirim dan menampilkan pesan "Mengonversi..." saat aksi berjalan, memberikan umpan balik kepada pengguna.
• Fungsi formAction yang dikembalikan oleh useFormState secara otomatis menangani pengiriman formulir dan memperbarui status dengan respons dari Server Action.

3. Memahami Pembaruan Progresif

Saat pengguna mengirimkan formulir, fungsi handleSubmit dipanggil. Fungsi ini membuat objek FormData dari formulir dan meneruskannya ke fungsi formAction. Server Action kemudian dieksekusi di server. Karena penundaan buatan yang diperkenalkan di Server Action, Anda akan mengamati hal berikut:

1. Tombol kirim berubah menjadi "Mengonversi..." hampir seketika.
2. Setelah penundaan singkat (250ms), kode mensimulasikan pengambilan nilai tukar.
3. Jumlah yang dikonversi dihitung dan hasilnya dikirim kembali ke klien.
4. state.message di komponen React diperbarui, menampilkan jumlah yang dikonversi.

Ini menunjukkan bagaimana streaming respons memungkinkan kita untuk memberikan pembaruan sementara kepada pengguna saat data tersedia, yang mengarah pada pengalaman pengguna yang lebih responsif dan menarik.

Manfaat Respons Formulir Progresif

• Pengalaman Pengguna yang Lebih Baik: Memberikan umpan balik langsung kepada pengguna, membuat aplikasi terasa lebih responsif dan tidak lamban.
• Mengurangi Latensi yang Dirasakan: Dengan menunjukkan hasil sementara, pengguna merasakan prosesnya lebih cepat, meskipun operasi secara keseluruhan memakan waktu yang sama.
• Keterlibatan yang Ditingkatkan: Menjaga pengguna tetap terlibat dengan memberikan pembaruan waktu nyata dan mencegah mereka meninggalkan formulir karena penundaan yang dirasakan.
• Meningkatkan Tingkat Konversi: Pengalaman pengguna yang lebih lancar dan responsif dapat menghasilkan tingkat konversi yang lebih tinggi, terutama untuk formulir yang kompleks.

Teknik Lanjutan

1. Menggunakan `useOptimistic` untuk Pembaruan UI Segera

Hook useOptimistic memungkinkan Anda untuk memperbarui UI secara optimis sebelum Server Action selesai. Ini dapat memberikan waktu respons yang dirasakan lebih cepat, karena UI segera mencerminkan hasil yang diharapkan.

import { useOptimistic } from 'react';

function MyComponent() {
  const [optimisticState, addOptimistic] = useOptimistic(
    initialState,
    (state, newUpdate) => {
      // Kembalikan status baru berdasarkan pembaruan
      return { ...state, ...newUpdate };
    }
  );

  const handleClick = async () => {
    addOptimistic({ someValue: 'optimistic update' });
    await myServerAction();
  };

  return (
    <div>
      <p>{optimisticState.someValue}</p>
      <button onClick={handleClick}>Perbarui</button>
    </div>
  );
}

Dalam contoh konverter mata uang, Anda dapat secara optimis memperbarui jumlah yang dikonversi berdasarkan nilai tukar saat ini, memberikan pratinjau langsung kepada pengguna sebelum perhitungan sebenarnya selesai di server. Jika server mengembalikan kesalahan, Anda dapat mengembalikan pembaruan optimis tersebut.

2. Mengimplementasikan Penanganan Kesalahan dan Mekanisme Fallback

Sangat penting untuk mengimplementasikan penanganan kesalahan yang kuat dan mekanisme fallback untuk menangani kasus di mana Server Action gagal atau koneksi jaringan terputus. Anda dapat menggunakan blok try...catch di dalam Server Action untuk menangkap kesalahan dan mengembalikan pesan kesalahan yang sesuai ke klien.

// server/actions.ts

export const convertCurrency = async (prevState: any, formData: FormData) => {
  // ...
  try {
    // ...
  } catch (error: any) {
    console.error(error);
    return { message: 'Terjadi kesalahan saat mengonversi mata uang. Silakan coba lagi nanti.' };
  }
};

Di sisi klien, Anda dapat menampilkan pesan kesalahan kepada pengguna dan memberikan opsi untuk mencoba kembali operasi atau menghubungi dukungan.

3. Melakukan Caching Nilai Tukar untuk Performa

Mengambil nilai tukar dari API eksternal bisa menjadi hambatan performa. Untuk meningkatkan performa, Anda dapat melakukan cache nilai tukar menggunakan mekanisme caching seperti Redis atau Memcached. unstable_cache dari Next.js (seperti yang digunakan dalam contoh) menyediakan solusi caching bawaan. Ingatlah untuk membatalkan validasi cache secara berkala untuk memastikan bahwa nilai tukar selalu terbaru.

4. Pertimbangan Internasionalisasi

Saat membangun aplikasi untuk audiens global, penting untuk mempertimbangkan internasionalisasi (i18n). Ini termasuk:

• Pemformatan Angka: Gunakan format angka yang sesuai untuk berbagai lokal (misalnya, menggunakan koma atau titik sebagai pemisah desimal).
• Pemformatan Mata Uang: Tampilkan simbol dan format mata uang sesuai dengan lokal pengguna.
• Pemformatan Tanggal dan Waktu: Gunakan format tanggal dan waktu yang sesuai untuk berbagai lokal.
• Lokalisasi: Terjemahkan UI ke dalam berbagai bahasa.

Pustaka seperti Intl dan react-intl dapat membantu Anda mengimplementasikan i18n di aplikasi React Anda.

Contoh Dunia Nyata dan Kasus Penggunaan

• E-commerce: Menampilkan biaya pengiriman dan perkiraan pengiriman waktu nyata saat pengguna menambahkan item ke keranjang mereka.
• Aplikasi Keuangan: Menyediakan kutipan saham dan pembaruan portofolio waktu nyata.
• Pemesanan Perjalanan: Menampilkan harga dan ketersediaan penerbangan waktu nyata.
• Visualisasi Data: Melakukan streaming pembaruan data ke bagan dan grafik.
• Alat Kolaborasi: Menampilkan pembaruan waktu nyata untuk dokumen dan proyek.

Kesimpulan

Streaming respons Server Action React menawarkan cara yang ampuh untuk meningkatkan pengalaman pengguna aplikasi React Anda. Dengan menyediakan respons formulir progresif, Anda dapat membuat formulir yang lebih cepat, lebih responsif, dan lebih menarik yang membuat pengguna tetap terlibat dan meningkatkan tingkat konversi. Dengan menggabungkan streaming respons dengan teknik seperti pembaruan optimis dan caching, Anda dapat membangun pengalaman pengguna yang benar-benar luar biasa.

Seiring Server Action React terus berkembang, kita dapat mengharapkan lebih banyak fitur dan kemampuan canggih yang akan muncul, yang semakin menyederhanakan pengembangan aplikasi web yang kompleks dan dinamis.

Eksplorasi Lebih Lanjut

• Dokumentasi Server Actions Next.js
• Dokumentasi Resmi React
• Streams API

Panduan ini memberikan gambaran komprehensif tentang streaming respons Server Action React dan penerapannya pada respons formulir progresif. Dengan memahami konsep dan teknik yang dibahas di sini, Anda dapat memanfaatkan fitur canggih ini untuk membangun aplikasi web yang lebih cepat, lebih responsif, dan lebih menarik.