Remix memiliki function utama loader, action dan  default component.

1. Loader dan Action akan berjalan di balik layar (server side) tanpa muncul di sisi user atau frontend.
2. Yang akan di render dibrowser hanya export default dari komponen/route itu sendiri saja.

Mari kita ambil contoh, kita akan membuat satu halaman yang berisi form note yang dapat di submit.

export async function action({
  request,
}) {
  const formData = await request.formData()
  // Tulis logika penyimpanan data formData disini
}


// template
export default function NewNotePage() {
  return (
    <main>
      <form method="post" action="/notes" id="note-form">
        <p>
          <label htmlFor="title">Title</label>
          <input type="text" id="title" name="title" required />
        </p>
        <p>
          <label htmlFor="content">Content</label>
          <textarea id="content" name="content" rows="5" required />
        </p>
        <div className="form-actions">
          <button>Add Note</button>
        </div>
      </form>
    </main>
  );
}

Yang akan tampil di browser hanya isi dari function NewNotePage sedangkan action hanya akan bekerja di balik layar untuk menghandle hasil submit dari form #note-form.

Berikut gambaran cara kerjanya,

Untuk penjelasan lebih lanjut lagi soal loader, action dan  default akan kita bahas nanti.