Memahami SSR, CSR, SPA, dan MPA
Kalian yang sedang belajar web development mungkin pernah pusing dengan istilah-istilah yang kedengeran rumit seperti Server-Side Rendering (SSR), Client-Side Rendering (CSR), Single-Page Application (SPA), dan Multi-Page Application (MPA). Jika kebingungan ini sempat membuat kalian ingin menyerah atau pindah jurusan, tenang saja. Di artikel kali ini, saya akan menjelaskan istilah-istilah tersebut sesimpel mungkin.
Kembali ke Dasar: Bagaimana Website Bekerja?
Untuk memahami istilah di atas, kita perlu paham terlebih dahulu cara kerja dasar sebuah website.
Pada dasarnya, website bekerja dengan cara mengirimkan request (permintaan) kepada server setiap kali pengguna membukanya. Request ini kemudian diproses oleh server dan dikembalikan kepada browser dalam wujud file HTML, CSS, dan JavaScript.
Sebagai contoh, bayangin kalian ingin membuka Facebook. Kalian mengetik URL(https://www.facebook.com) di browser. Ketika tombol Enter ditekan, browser langsung mengirimkan permintaan kepada server. Kira-kira, browser "berbicara" seperti ini:
“Halo Server, pengguna saya mau mengakses www.facebook.com nih. Tolong kirimkan file HTML, CSS, dan JavaScript-nya agar dia bisa mulai main Facebook.”
Server yang menerima request tersebut akan menindaklanjutinya dan membalas permintaan browser. Respons server kira-kira berbunyi:
“Ini file HTML, CSS, dan JavaScript untuk membuka Facebook.”
Siklus request dari browser dan response dari server ini terjadi secara terus-menerus. Setiap kali pengguna mengklik tombol di dalam website atau berpindah halaman, proses saling berbalas pesan ini akan terus berulang.
Multi-Page Application (MPA) & Server-Side Rendering (SSR)
Sejak internet diciptakan pada era 90-an, beginilah cara kerja tradisional sebuah website. Website yang selalu mengirimkan request ke server setiap kali ada tombol yang diklik, halaman yang berpindah, atau tugas yang dieksekusi disebut sebagai Multi-Page Application (MPA).
Secara tradisional, aplikasi MPA bekerja menggunakan metode Server-Side Rendering (SSR). Artinya, setiap kali kalian berpindah halaman, browser akan mengirimkan permintaan baru ke server, dan server harus merender seluruh halaman HTML dari awal sebelum mengirimkannya kembali ke browser. Salah satu contoh framework populer yang menggunakan pendekatan MPA adalah Laravel.
MPA Sangat ramah SEO (Search Engine Optimization). Konten yang sudah dirender oleh server membuat website lebih mudah dibaca dan ditemukan oleh mesin pencari seperti Google. Saat pengguna mencari suatu kata kunci, website MPA memiliki peluang besar untuk muncul di hasil pencarian.
Get Muhammad Dzaky’s stories in your inbox
Join Medium for free to get updates from this writer.
Naah tapii, MPA punya kekurangan. Setiap kali berpindah halaman, website harus dimuat ulang (refresh). Hal ini sering kali memunculkan jeda layar putih atau hitam sesaat di browser, yang mengurangi kenyamanan pengalaman pengguna (User Experience).
Client-Side Rendering (CSR) & Single-Page Application (SPA)
Untuk mengatasi masalah jeda dan refresh yang mengganggu kenyamanan pengguna, para developer menciptakan konsep baru yang disebut Client-Side Rendering (CSR).
Berbeda dengan SSR, pada metode CSR, server hanya mengirimkan bundel file CSS dan JavaScript di awal. Nantinya, browser penggunalah yang bertugas “merakit” file-file tersebut menjadi halaman HTML utuh. Jika metode SSR menghasilkan aplikasi MPA, maka metode CSR ini menghasilkan aplikasi yang disebut Single-Page Application (SPA).
Cara kerja ini sangat efisien. Setelah browser mengunduh bundel awal, perpindahan halaman atau klik tautan tidak lagi membutuhkan request halaman baru ke server.
SPA memiliki kelebihan yg dimana pengalaman pengguna jauh lebih mulus. Website tidak akan mengalami refresh ulang saat berpindah halaman, membuatnya terasa secepat aplikasi native di smartphone.
Namun metode CSR memiliki kelemahan fatal pada SEO. Karena konten dirakit di browser pengguna, mesin pencari kesulitan membaca isi website, sehingga website berbasis murni CSR akan sulit bersaing di halaman pencarian.
SSR & CSR VS MPA & CPA
Sebelum lanjut ke pembahasan berikutnya, mari kita luruskan definisi yang sering kali tumpang tindih
SSR dan CSR adalah metode perenderan (cara halaman dibangun).
MPA dan SPA adalah wujud aplikasinya (hasil akhir yang digunakan).
MPA adalah wujud aplikasi dari metode SSR, sedangkan SPA adalah wujud aplikasi dari metode CSR.
Terobosan Baru, Menggabungkan SSR dan CSR
Karena metode CSR murni memiliki kelemahan pada SEO, dunia pengembangan web modern menciptakan sebuah terobosan cerdas: menggabungkan metode SSR dan CSR ke dalam satu Single-Page Application (SPA).
Framework modern seperti Next.js menerapkan strategi ini dengan sangat elegan. Saat pengguna baru pertama kali mengakses website, server akan melakukan Server-Side Rendering. Server mengirimkan konten HTML yang sudah “jadi” secara utuh. Tujuannya? Agar website tersebut sangat mudah diindeks oleh robot mesin pencari.
Namun, setelah konten awal tersebut tampil di layar, secara diam-diam di belakang layar (background), browser akan mengunduh sisa bundel JavaScript dan CSS. Proses ini membuat halaman yang awalnya statis seolah “hidup” dan diperlakukan layaknya aplikasi CSR.
Hasil akhirnya adalah sebuah Single-Page Application yang ga perlu refresh saat berpindah halaman, tanpa harus mengorbankan performa SEO sama sekali!
