Cara Remix Bekerja Di Frontend Dan Backend
Remix memiliki function utama loader
, action
dan default
component.
- Loader dan Action akan berjalan di balik layar (server side) tanpa muncul di sisi user atau frontend.
- 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.
Close
Silahkan Login/Sign Up
😞 Discord eklusif buat member asinkron.com
Jangan khawatir silahkan Daftar GRATIS 😎
*Link discord akan dikirim ke email yang anda gunakan untuk mendaftar.