Belajar Remix - Data Loading & Actions

#Pendahuluan

Di episode 4 kalian sudah menguasai routing — peta aplikasi. Sekarang kita isi peta itu dengan data. Inilah jantung Remix: loader dan action, dua fungsi yang mengontrol seluruh aliran data antara server dan UI.

Model ini berbeda total dari SPA. Di SPA, komponen memanggil fetch di dalam useEffect, mengelola loading dan error sendiri. Di Remix, loader berjalan di server sebelum halaman dikirim, dan action memproses perubahan data saat form dikirim. Hasilnya: lebih sedikit kode, lebih sedikit race condition, dan UX yang lebih konsisten.

Episode 5 akan membedah loader dan action secara menyeluruh, lalu menambahkan dua senjata penting: redirect untuk mengalihkan permintaan, dan defer untuk streaming data yang lambat.

#Data Loading dengan Loader

#Loader dan useLoaderData

Fungsi loader berjalan di server saat route diminta. Ia mengembalikan data yang bisa diakses komponen lewat hook useLoaderData. Data ini di-serialisasi dan dikirim bersama HTML, sehingga halaman sudah berisi konten sebelum JavaScript dijalankan.

Loader sederhana dengan array data

import { useLoaderData } from "@remix-run/react";
 
export async function loader() {
  return { judul: "Selamat datang", jumlahPosting: 42 };
}
 
export default function Beranda() {
  const data = useLoaderData();
  return <h1>{data.judul}</h1>;
}

Loader menerima context berupa request, params, dan context, lalu mengembalikan data yang di-serialisasi ke client. Tidak perlu memanggil fetch ke API sendiri — data sudah tersedia saat komponen pertama kali di-render.

#Context Loader yang Sering Dipakai

Karena loader berjalan di server, kalian bisa membaca URL, header, cookie, dan environment variable dengan aman. Contoh penggunaan paling umum:

request untuk membaca URL, method, dan header.
params untuk segmen dinamis seperti id.
context untuk nilai dari entry.server.tsx, seperti koneksi database.

#Form Submission dan Actions

#Action Menangani Perubahan

Saat sebuah form dikirim, Remix memanggil action di route tersebut. Action menerima request yang isinya data form, memprosesnya di server, lalu mengembalikan respons — biasanya data hasil validasi atau redirect.

Action membaca formData

import { useActionData, Form } from "@remix-run/react";
 
export async function action({ request }) {
  const formData = await request.formData();
  const nama = formData.get("nama");
  return { pesan: `Halo ${nama}` };
}
 
export default function FormNama() {
  const data = useActionData();
  return (
    <Form method="post">
      <input name="nama" />
      <button type="submit">Kirim</button>
      {data?.pesan}
    </Form>
  );
}

Form dari @remix-run/react mengirim request ke action di route yang sama, dan useActionData membaca hasil action. Perhatikan bahwa form bekerja seperti form HTML biasa — inilah dasar progressive enhancement.

#Validasi dan Feedback

Pola umum adalah action melakukan validasi di server, lalu mengembalikan error field. Komponen menampilkan error lewat useActionData. Validasi akan dibahas mendalam di episode 7; di sini yang penting adalah alurnya: data masuk ke action, diproses di server, dan hasilnya kembali ke komponen.

#Redirect dan Cookies

#Mengalihkan dengan redirect

Setelah action berhasil menyimpan data, halaman biasanya harus pindah. Fungsi redirect dari @remix-run/node mengirimkan respons 302 ke URL tujuan:

Redirect setelah action sukses

import { redirect } from "@remix-run/node";
 
export async function action({ request }) {
  const formData = await request.formData();
  await simpanPost(formData);
  return redirect("/posts");
}

redirect("/posts") mengembalikan respons yang memberitahu browser untuk pindah halaman. Karena action berjalan di server, redirect juga dikirim sebagai respons HTTP yang valid.

#Cookies untuk State

Cookie bisa dibaca dan ditulis langsung di loader atau action lewat helper di @remix-run/node. Memakai cookie secara langsung cocok untuk data kecil seperti preferensi; untuk autentikasi, Remix menyediakan session storage yang akan dibahas di episode 11.

#Deferred Data dan Streaming

#defer untuk Data Lambat

Tidak semua data sama cepatnya. Dengan defer, loader mengembalikan sebagian data langsung dan bagian lain sebagai promise yang di-stream saat siap. Halaman tetap me-render lebih dulu, dan data lambat muncul belakangan.

Deferred data dengan Await

import { defer } from "@remix-run/node";
import { Await, useLoaderData } from "@remix-run/react";
import { Suspense } from "react";
 
export async function loader() {
  return defer({
    cepat: "langsung tersedia",
    lambat: ambilDataBesar(),
  });
}
 
export default function Halaman() {
  const data = useLoaderData();
  return (
    <Suspense fallback={<p>Memuat data besar...</p>}>
      <Await resolve={data.lambat}>{(nilai) => <p>{nilai}</p>}</Await>
    </Suspense>
  );
}

Await menunggu promise dari defer dan me-render fallback via Suspense. Pola ini sangat berguna untuk data analitik, komentar, atau rekomendasi yang tidak harus menghalangi halaman utama.

#Penutup

Episode 5 memberi kalian kendali penuh atas data: loader untuk membaca di server, action untuk menulis lewat form, redirect untuk mengalihkan, cookie untuk state kecil, dan defer untuk streaming data lambat. Ini fondasi yang dipakai hampir setiap episode berikutnya.

Inti yang harus dibawa pulang:

Loader berjalan di server dan datanya tersedia sebelum komponen me-render.
Action dipanggil saat form dikirim dan menerima request.formData.
useLoaderData membaca hasil loader; useActionData membaca hasil action.
redirect mengembalikan respons 302 untuk memindahkan halaman.
Cookie untuk data kecil; session storage untuk autentikasi.
defer + Await + Suspense untuk men-stream data yang lambat.

Di episode 6 selanjutnya kita akan membahas UI dan komposisi komponen — membuat komponen React reusable, styling dengan CSS Modules, Tailwind, atau styled-components, interaktivitas client-side di Remix, serta optimasi UI yang di-render di server. Routing dan data sudah ada; sekarang saatnya membuat semuanya tampak indah.