SPA vs MPA: Perbedaan Arsitektur Web Single Page dan Multi Page

Evolusi Cara Website Berpindah Halaman

Jika kamu membuka website berita zaman dulu (atau web berbasis PHP/WordPress murni), setiap kali kamu mengeklik menu "Tentang Kami", layarmu akan berkedip putih sejenak, lalu muncul halaman baru. Ini disebut MPA (Multi-Page Application).

Tapi jika kamu membuka Twitter, Netflix, atau Gmail, saat kamu berpindah menu, *header* dan *sidebar*-nya tetap diam, sementara konten di tengahnya berganti secara instan tanpa layar berkedip (tanpa memuat ulang halaman). Ini disebut SPA (Single Page Application).

Cara Kerja MPA (Tradisional)

Dalam arsitektur MPA, setiap halaman (Beranda, Profil, Kontak) adalah sebuah file HTML yang berdiri sendiri secara fisik di server.

• Alur Kerja: Klik Link → Browser meminta HTML ke Server → Server merakit HTML halaman tersebut → Browser men-download dan menampilkan HTML baru secara utuh.
• Kelebihan: SEO (Optimasi Mesin Pencari) sangat sempurna karena setiap halaman punya *link* dan dokumennya sendiri. Memori di laptop/HP pengguna sangat ringan karena Browser selalu dibersihkan tiap pindah halaman.
• Kekurangan: Terasa lambat dan memakan banyak kuota internet karena Browser harus men-download ulang seluruh file CSS dan *Header/Footer* secara berulang-ulang di tiap halaman.

Cara Kerja SPA (Era JavaScript Modern)

Di SPA (seperti yang dibuat menggunakan React, Vue, atau Angular), website-mu secara fisik Hanya Punya 1 File HTML Utama (index.html)! Makanya disebut *Single Page*.

• Alur Kerja: Saat web dibuka pertama kali, Browser men-download satu file HTML kosong dan sebuah file JavaScript raksasa. Selanjutnya, jika kamu klik menu "Profil", Browser TIDAK MEMINTA halaman baru ke server. Kode JavaScript di memori komputermulah yang secara ajaib menghapus dan menggambar ulang struktur tampilan di layarmu (menggunakan Virtual DOM).
• Kelebihan: Perpindahan halaman secepat kilat (Instan). Pengalaman pengguna (UX) sangat mulus seperti menggunakan aplikasi asli (*Native App*).
• Kekurangan: Loading pertama kali (First Load) cukup berat karena harus men-download skrip JS yang gemuk. SPA murni juga sangat dibenci oleh robot SEO Google (meskipun masalah ini sudah dipecahkan oleh framework Next.js/Nuxt.js).