Frontend vs Backend: Apa Bezanya?
Frontend ialah bahagian aplikasi yang berjalan dalam pelayar pengguna — halaman, butang, borang dan animasi yang mereka lihat dan klik. Backend ialah bahagian yang berjalan pada pelayan yang tidak pernah pengguna lihat: ia menyimpan dan mendapatkan semula data, melaksanakan peraturan perniagaan, menyemak siapa yang dibenarkan melakukan apa, dan berhubung dengan perkhidmatan lain seperti pembayaran dan e-mel. Kedua-duanya berkomunikasi melalui API, dan bersama pangkalan data ia membentuk aplikasi "full-stack".
Mengapa ini penting apabila membina dengan AI
Apabila anda menerangkan aplikasi kepada pembina AI, anda sebenarnya sedang menerangkan kedua-dua bahagian sekali gus, sama ada anda sedari atau tidak. "Pelanggan boleh menempah slot" bermaksud borang tempahan (frontend), peraturan tentang slot mana yang kosong (backend) dan tempat untuk menyimpan tempahan (pangkalan data).
Memahami pembahagian ini membantu dalam tiga cara praktikal:
- Keselamatan. Apa sahaja dalam frontend boleh dilihat dan diubah oleh pengguna. Peraturan dan rahsia mesti berada dalam backend.
- Penyahpepijatan. "Butang tidak bertindak balas" dan "butang bertindak balas tetapi tiada apa yang disimpan" menunjuk kepada bahagian yang berbeza, dan memberitahu AI yang mana satu anda lihat membantunya mencari punca dengan lebih cepat.
- Hos dan kos. Laman frontend sahaja murah dan mudah untuk dihoskan. Backend perlu berjalan di suatu tempat, yang mempengaruhi apa yang anda bayar dan cara aplikasi anda berkelakuan ketika tidak digunakan.
Analogi harian
Bayangkan sebuah restoran.
Frontend ialah ruang makan: menu, meja, hiasan dalaman, pelayan yang mengambil pesanan anda. Ia direka untuk pelanggan dan mereka boleh melihat serta menyentuh semuanya.
Backend ialah dapur dan pejabat: tukang masak yang memasak, bilik stok, kaunter bayaran, dan peraturan pengurus tentang siapa yang layak mendapat diskaun. Pelanggan tidak masuk ke situ, dan mereka sepatutnya tidak boleh masuk.
API ialah laluan antara kedua-duanya — kaunter tempat pesanan masuk dan hidangan keluar, dalam format yang dipersetujui. Pangkalan data ialah bilik stok dan buku pesanan.
Pelanggan boleh menulis semula slip pesanan mereka (frontend berada di bawah kawalan mereka), tetapi dapur tetap memutuskan apa yang akan dimasak dan berapa caj yang dikenakan. Sebab itulah semakan penting perlu berada di belakang.
Tugas setiap bahagian
| Frontend | Backend | |
|---|---|---|
| Berjalan pada | Peranti pengguna, dalam pelayar | Pelayan yang anda (atau hos anda) kawal |
| Tugas utama | Memaparkan, mengumpul input, bertindak balas kepada klik | Menyimpan data, melaksanakan peraturan, menguatkuasakan kebenaran, memanggil perkhidmatan lain |
| Pengguna boleh lihat dan ubah kod? | Ya — ia dimuat turun ke pelayar mereka | Tidak |
| Boleh simpan kunci API rahsia? | Tidak | Ya, dalam pembolehubah persekitaran |
| Teknologi lazim | HTML, CSS, JavaScript/TypeScript, React, Vue, Svelte, Tailwind | Node.js, Python (FastAPI, Django), C#, Java, Go, Ruby |
| Perkara yang selalu silap | Susun atur rosak pada telefon, butang tidak berfungsi, halaman perlahan | Data tidak disimpan, data salah dipaparkan, ralat, lubang keselamatan |
Sesetengah rangka kerja mengaburkan garis ini. Next.js, sebagai contoh, membolehkan satu projek mengandungi kod pelayar dan kod pelayan. Idea asasnya tetap sama: soalannya sentiasa di mana bahagian ini berjalan?
Contoh kerja: menempah kelas
Inilah yang berlaku apabila seseorang menempah kelas yoga, langkah demi langkah.
| Langkah | Di mana | Apa yang berlaku |
|---|---|---|
| 1 | Frontend | Halaman jadual dimuatkan dan meminta backend senarai kelas minggu ini. |
| 2 | Backend | Membaca kelas dan tempahan daripada pangkalan data, mengira tempat yang tinggal, dan memulangkan senarai dalam JSON. |
| 3 | Frontend | Memaparkan setiap kelas dengan masa, guru dan bilangan tempat yang tinggal. |
| 4 | Frontend | Pengguna memilih kelas dan mengisi nama serta e-mel. Borang menyemak sama ada e-mel kelihatan sah (sebagai kemudahan, bukan jaminan). |
| 5 | Frontend → Backend | Menghantar permintaan POST /api/bookings melalui API. |
| 6 | Backend | Mengesahkan semula input, menyemak sama ada kelas belum penuh, menyimpan tempahan, dan meminta perkhidmatan e-mel menghantar pengesahan menggunakan kunci rahsia. |
| 7 | Backend → Frontend | Memulangkan "berjaya ditempah" atau "maaf, sudah penuh." |
| 8 | Frontend | Memaparkan skrin pengesahan. |
Perhatikan langkah 4 dan 6: input disemak dua kali. Semakan frontend memberi maklum balas serta-merta; semakan backend ialah yang benar-benar berkuat kuasa, kerana pengguna yang berazam boleh memintas frontend sepenuhnya.
Istilah biasa dijelaskan
| Istilah | Maksud |
|---|---|
| Client / server | Client ialah pelayar (atau aplikasi) yang membuat permintaan; server menjawabnya. |
| UI | User interface — skrin dan kawalan. |
| API | Cara yang dipersetujui untuk frontend meminta data atau tindakan daripada backend. |
| Endpoint | Satu URL khusus pada API, seperti /api/bookings. |
| Full stack | Frontend + backend + pangkalan data bersama. Lihat apa itu aplikasi full-stack. |
| Static site | Frontend tanpa backend sendiri; fail yang sama untuk semua orang. |
| SPA | Single-page application: frontend yang mengemas kini halaman dalam pelayar dan bukannya memuatkan halaman baharu. |
| Server-side rendering (SSR) | Pelayan membina HTML halaman sebelum menghantarnya, yang boleh membantu kelajuan dan SEO. |
| Environment variables | Tetapan dan rahsia yang diberikan kepada backend semasa dijalankan, disimpan di luar kod. |
Adakah aplikasi anda memerlukan backend?
| Jika aplikasi anda… | Perlu backend? |
|---|---|
| Memaparkan maklumat yang sama untuk semua orang | Tidak |
| Mempunyai borang hubungi yang hanya menghantar e-mel kepada anda | Biasanya sebuah backend kecil, atau perkhidmatan borang |
| Menyimpan data yang akan dilihat orang lain | Ya |
| Mempunyai log masuk dan data peribadi | Ya |
| Menerima bayaran | Ya — sekurang-kurangnya untuk mencipta checkout dan menerima webhook pembayaran |
| Menggunakan API AI atau API berbayar lain dengan kunci rahsia | Ya, untuk memastikan kunci itu tidak sampai ke pelayar |
Kesilapan dan salah faham yang lazim
- Meletakkan kunci rahsia dalam frontend. Ia akan kelihatan kepada sesiapa sahaja yang membuka alat pembangun pelayar. Ini ialah kesilapan serius yang paling kerap berlaku dalam aplikasi yang dibina dengan AI.
- Menguatkuasakan peraturan hanya dalam frontend. Menyembunyikan butang "padam" untuk bukan pentadbir bukanlah perlindungan; backend mesti menolak permintaan itu.
- Menganggap backend hanyalah "pangkalan data". Pangkalan data menyimpan data. Backend memutuskan siapa boleh membaca dan mengubahnya, dan bagaimana.
- Menganggap JavaScript bermaksud frontend. JavaScript dan TypeScript juga berjalan pada pelayan, dengan Node.js.
- Menyalahkan bahagian yang salah. Jika halaman kelihatan betul tetapi data salah, masalahnya biasanya ada dalam backend atau pangkalan data, bukan reka bentuk.
- Membina berlebihan. Portfolio tidak memerlukan backend tersuai. Menambahnya hanya menambah kos dan bahagian yang boleh rosak.
Apa yang perlu diminta daripada pembina AI anda
- "Bahagian mana dalam aplikasi ini berjalan dalam pelayar dan bahagian mana pada pelayan?"
- "Pindahkan semua kunci API ke backend dan baca daripada pembolehubah persekitaran."
- "Sahkan setiap borang pada pelayan, bukan hanya dalam pelayar."
- "Kuatkuasakan dalam backend bahawa hanya pentadbir boleh memadam tempahan."
- "Halaman kelihatan baik tetapi data tidak disimpan — semak log backend untuk permintaan itu."
- "Ini laman pemasaran ringkas; kekalkan frontend sahaja melainkan kita memerlukan backend."
Frontend dan backend dalam Mythex
Projek Mythex baharu bermula dengan frontend Vite, React, TypeScript dan Tailwind, dan ejen menambah backend apabila aplikasi anda memerlukannya — atau anda boleh meminta API berasingan dalam Node, Python (FastAPI), C# atau Java yang berjalan bersama frontend dalam projek yang sama. Dalam pratonton anda boleh bertukar antara laman web dan pelayan API, dan penerbitan melancarkan kedua-duanya, dengan pangkalan data dan storan fail ditambah apabila diperlukan. Dokumentasi menerangkan aplikasi berbilang perkhidmatan, panduan pengehosan web menerangkan di mana setiap bahagian berjalan apabila aplikasi sudah live, dan templat aplikasi ialah cara pantas untuk melihat contoh full-stack.
Soalan lazim
Apa bezanya antara frontend dan backend?
Frontend ialah bahagian aplikasi yang berjalan dalam pelayar pengguna — halaman, butang dan borang yang mereka lihat dan klik. Backend berjalan pada pelayan yang tidak pernah pengguna lihat; ia menyimpan dan mendapatkan semula data, melaksanakan peraturan perniagaan, menyemak siapa yang dibenarkan melakukan apa, dan berhubung dengan perkhidmatan lain.
Adakah setiap aplikasi memerlukan backend?
Tidak. Laman pemasaran, portfolio atau laman pendaratan ringkas boleh menggunakan frontend sahaja. Sebaik sahaja aplikasi perlu menyimpan data yang dikongsi, log masuk pengguna, menerima bayaran atau menggunakan kunci API rahsia, ia memerlukan sejenis backend.
Adakah HTML itu frontend atau backend?
HTML, CSS dan JavaScript yang berjalan dalam pelayar ialah frontend. JavaScript juga boleh berjalan pada pelayan menggunakan Node.js, dan ketika itu ia ialah kod backend. Bahasa tidak menentukannya; tempat kod itu berjalan yang menentukan.
Apakah maksud full stack?
Full stack bermaksud meliputi kedua-dua frontend dan backend (dan biasanya pangkalan data). Aplikasi full stack ialah aplikasi yang mempunyai ketiga-tiga bahagian itu; pembangun full stack bekerja pada semuanya.