Frontend vs Backend: Apa Bedanya?
Frontend adalah bagian aplikasi yang berjalan di browser pengguna — halaman, tombol, formulir, dan animasi yang mereka lihat dan klik. Backend adalah bagian yang berjalan di server yang tidak pernah dilihat pengguna: ia menyimpan dan mengambil data, menerapkan aturan bisnis, memeriksa siapa yang boleh melakukan apa, dan berkomunikasi dengan layanan lain seperti pembayaran dan email. Keduanya saling berkomunikasi lewat API, dan bersama database, keduanya membentuk aplikasi "full-stack".
Mengapa ini penting saat membangun dengan AI
Ketika Anda menjelaskan aplikasi ke pembuat aplikasi AI, Anda sebenarnya sedang menjelaskan kedua bagian sekaligus, baik Anda sadari atau tidak. "Pelanggan bisa memesan slot" berarti formulir pemesanan (frontend), aturan tentang slot mana yang masih kosong (backend), dan tempat untuk menyimpan pemesanan (database).
Memahami pembagian ini membantu dalam tiga hal praktis:
- Keamanan. Apa pun di frontend bisa dilihat dan diubah oleh pengguna. Aturan dan rahasia harus berada di backend.
- Debugging. "Tombol tidak merespons" dan "tombol merespons tetapi tidak ada yang tersimpan" menunjuk ke bagian yang berbeda, dan menyebutkan mana yang Anda lihat membantu AI menemukan penyebabnya lebih cepat.
- Hosting dan biaya. Situs yang hanya frontend murah dan sederhana untuk di-hosting. Backend harus berjalan di suatu tempat, yang memengaruhi berapa yang Anda bayar dan bagaimana aplikasi berperilaku saat tidak digunakan.
Analogi sehari-hari
Bayangkan sebuah restoran.
Frontend adalah ruang makan: menu, meja, dekorasi, dan pelayan yang mencatat pesanan Anda. Ia dirancang untuk pelanggan, dan pelanggan bisa melihat serta menyentuh semuanya.
Backend adalah dapur dan kantor: koki yang memasak, gudang stok, kasir, dan aturan manajer tentang siapa yang mendapat diskon. Pelanggan tidak masuk ke sana, dan mereka memang tidak seharusnya bisa masuk.
API adalah penghubung di antara keduanya — meja pesanan tempat order masuk dan piring keluar, dalam format yang disepakati. Database adalah gudang stok dan buku pesanan.
Pelanggan bisa menulis ulang catatan pesanannya (frontend ada di bawah kendalinya), tetapi dapur tetap memutuskan apa yang akan dimasak dan berapa harganya. Itulah sebabnya pemeriksaan penting harus ditempatkan di belakang.
Tugas masing-masing bagian
| Frontend | Backend | |
|---|---|---|
| Berjalan di | Perangkat pengguna, di browser | Server yang Anda (atau penyedia hosting) kendalikan |
| Tugas utama | Menampilkan, menerima input, merespons klik | Menyimpan data, menerapkan aturan, menegakkan izin, memanggil layanan lain |
| Bisakah pengguna melihat dan mengubah kodenya? | Ya — kodenya diunduh ke browser mereka | Tidak |
| Bisakah menyimpan kunci API rahasia? | Tidak | Ya, di environment variables |
| Teknologi umum | HTML, CSS, JavaScript/TypeScript, React, Vue, Svelte, Tailwind | Node.js, Python (FastAPI, Django), C#, Java, Go, Ruby |
| Yang sering bermasalah | Tata letak rusak di ponsel, tombol tidak berfungsi, halaman lambat | Data tidak tersimpan, data yang salah ditampilkan, error, celah keamanan |
Beberapa framework mengaburkan batas ini. Next.js, misalnya, memungkinkan satu proyek berisi kode browser sekaligus kode server. Idenya tetap sama: pertanyaannya selalu di mana potongan kode ini berjalan?
Contoh nyata: memesan kelas
Berikut yang terjadi ketika seseorang memesan kelas yoga, langkah demi langkah.
| Langkah | Di mana | Yang terjadi |
|---|---|---|
| 1 | Frontend | Halaman jadwal dimuat dan meminta backend untuk daftar kelas minggu ini. |
| 2 | Backend | Membaca kelas dan pemesanan dari database, menghitung sisa tempat, dan mengembalikan daftar sebagai JSON. |
| 3 | Frontend | Menampilkan setiap kelas dengan waktu, pengajar, dan sisa tempat. |
| 4 | Frontend | Pengguna memilih kelas dan mengisi nama serta email. Formulir memeriksa apakah email tampak valid (sebagai bantuan, bukan jaminan). |
| 5 | Frontend → Backend | Mengirim permintaan POST /api/bookings lewat API. |
| 6 | Backend | Memvalidasi input sekali lagi, memeriksa apakah kelas sudah penuh, menyimpan pemesanan, dan meminta layanan email mengirim konfirmasi menggunakan kunci rahasia. |
| 7 | Backend → Frontend | Mengembalikan "berhasil dipesan" atau "maaf, sudah penuh". |
| 8 | Frontend | Menampilkan layar konfirmasi. |
Perhatikan langkah 4 dan 6: input diperiksa dua kali. Pemeriksaan di frontend memberi umpan balik seketika; pemeriksaan di backend adalah yang benar-benar berlaku, karena pengguna yang gigih bisa melewati frontend sepenuhnya.
Istilah umum yang dijelaskan
| Istilah | Artinya |
|---|---|
| Client / server | Client adalah browser (atau aplikasi) yang membuat permintaan; server yang menjawabnya. |
| UI | User interface — layar dan kontrol yang dilihat pengguna. |
| API | Cara yang disepakati agar frontend meminta data atau tindakan dari backend. |
| Endpoint | Satu URL spesifik di API, misalnya /api/bookings. |
| Full stack | Frontend + backend + database bersama-sama. Lihat apa itu aplikasi full-stack. |
| Static site | Frontend tanpa backend sendiri; file yang sama untuk semua orang. |
| SPA | Single-page application: frontend yang memperbarui halaman di browser alih-alih memuat halaman baru. |
| Server-side rendering (SSR) | Server membuat HTML halaman sebelum mengirimkannya, yang bisa membantu kecepatan dan SEO. |
| Environment variables | Pengaturan dan rahasia yang diberikan ke backend saat berjalan, dijaga agar tidak ada di dalam kode. |
Apakah aplikasi Anda butuh backend?
| Jika aplikasi Anda… | Butuh backend? |
|---|---|
| Menampilkan informasi yang sama untuk semua orang | Tidak |
| Punya formulir kontak yang hanya mengirim email ke Anda | Biasanya backend kecil, atau layanan formulir |
| Menyimpan data yang akan dilihat orang lain | Ya |
| Punya login dan data pribadi | Ya |
| Menerima pembayaran | Ya — setidaknya untuk membuat checkout dan menerima webhook pembayaran |
| Memakai AI berbayar atau API lain dengan kunci rahasia | Ya, agar kunci tetap jauh dari browser |
Kesalahan umum dan kesalahpahaman
- Menaruh kunci rahasia di frontend. Kunci itu akan terlihat oleh siapa pun yang membuka developer tools browser. Ini kesalahan serius yang paling umum pada aplikasi yang dibuat dengan AI.
- Hanya menerapkan aturan di frontend. Menyembunyikan tombol "hapus" bagi pengguna non-admin bukan perlindungan; backend harus menolak permintaan tersebut.
- Menganggap backend hanya "database". Database menyimpan data. Backend yang memutuskan siapa yang boleh membaca dan mengubahnya, dan bagaimana caranya.
- Mengira JavaScript berarti frontend. JavaScript dan TypeScript juga berjalan di server, dengan Node.js.
- Menyalahkan bagian yang keliru. Jika halaman tampak benar tetapi datanya salah, masalahnya biasanya ada di backend atau database, bukan di desain.
- Membangun berlebihan. Portofolio tidak perlu backend khusus. Menambahkannya menambah biaya dan bagian yang harus dijaga.
Apa yang diminta dari pembuat aplikasi AI Anda
- "Bagian mana dari aplikasi ini yang berjalan di browser dan mana yang berjalan di server?"
- "Pindahkan semua kunci API ke backend dan baca dari environment variables."
- "Validasi setiap formulir di server juga, bukan hanya di browser."
- "Pastikan di backend bahwa hanya admin yang bisa menghapus pemesanan."
- "Halamannya tampak baik tetapi datanya tidak tersimpan — periksa log backend untuk permintaan itu."
- "Ini situs pemasaran sederhana; biarkan hanya frontend kecuali kita memang butuh backend."
Frontend dan backend di Mythex
Proyek Mythex baru dimulai dari frontend Vite, React, TypeScript, dan Tailwind, dan agen menambahkan backend saat aplikasi Anda memerlukannya — atau Anda bisa meminta API terpisah dalam Node, Python (FastAPI), C#, atau Java yang berjalan bersama frontend di proyek yang sama. Di preview, Anda bisa berpindah antara situs web dan server API, dan publikasi men-deploy keduanya, dengan database dan penyimpanan file ditambahkan saat diperlukan. Dokumentasi menjelaskan aplikasi multi-layanan, panduan web hosting menjelaskan di mana masing-masing bagian berjalan setelah live, dan templat aplikasi adalah cara cepat untuk melihat contoh full-stack.
Pertanyaan
Apa perbedaan frontend dan backend?
Frontend adalah bagian aplikasi yang berjalan di browser pengguna — halaman, tombol, dan formulir yang mereka lihat dan klik. Backend berjalan di server yang tidak pernah dilihat pengguna; ia menyimpan data, menerapkan aturan bisnis, memeriksa izin, dan berkomunikasi dengan layanan lain.
Apakah setiap aplikasi butuh backend?
Tidak. Situs pemasaran, portofolio, atau halaman landing sederhana bisa hanya memakai frontend. Begitu aplikasi perlu menyimpan data bersama, login pengguna, menerima pembayaran, atau memakai kunci API rahasia, aplikasi itu membutuhkan backend dalam bentuk tertentu.
Apakah HTML termasuk frontend atau backend?
HTML, CSS, dan JavaScript yang berjalan di browser termasuk frontend. JavaScript juga bisa berjalan di server memakai Node.js, dan saat itu ia menjadi kode backend. Bahasanya tidak menentukan; yang menentukan adalah di mana kode itu berjalan.
Apa arti full stack?
Full stack berarti mencakup frontend dan backend (dan biasanya database). Aplikasi full stack memiliki ketiga bagian itu; pengembang full stack mengerjakan semuanya.