Skip to main content

Website Statis & Dinamis

Dilihat dari cara pembuatan kontennya, website bisa dikelompokkan dalam dua kelompok utama: statis & dinamis.

Website Statis​

Seluruh konten HTML-nya dibuat baik secara manual atau pakai semacam compiler sebelum di-upload ke server. Ini jenis yang paling mudah & murah pembuatannya. Nggak perlu ada database & server khusus, cukup server biasa yang bisa melayani file HTML, CSS, JavaScript & gambar. Kalo ada perubahan isi, penambahan halaman, dan lain-lain si pembuat harus mengedit langsung file HTML-nya atau kalau pakai compiler, mengkompail ulang websitenya & upload lagi. Jadi seolah-olah webserver hanya berfungsi sebagai file server tempat menyimpan file HTML dan file pendukung lainnya. Teknik ini disebut SSG (Static Site Generation).

Umumnya website statis berfungsi seperti brosur. Informasinya relatif sederhana & jarang berubah. Beberapa contoh website statis bisa dilihat di sini: https://www.founderjar.com/inspiration/static-websites/

Website Dinamis​

Dalam website dinamis, sebagian besar atau seluruh konten dibangun di server sebelum dikirimkan sebagai respon dalam format HTML ke browser. Para pembuat konten nggak mengubah HTML secara langsung, melainkan menyimpan kontennya di tempat terpisah, seperti database. Konten ini kemudian diakses oleh aplikasi server yang menghasilkan respon HTML untuk dikirim ke browser. Teknik ini dikenal sebagai SSR (Server Side Rendering), dan digunakan dalam berbagai aplikasi seperti situs e-commerce, portal berita, dan platform media sosial.

Client-Side Rendering​

Sejak dipopulerkannya teknik Ajax (Asynchronous JavaScript And XML) sekitar awal tahun 2000an, ada teknik lain untuk menampilkan sebagian isi halaman web secara dinamis yang disebut CSR (Client Side Rendering). Di dalam teknik ini, webserver hanya perlu mengirim file HTML yang isinya hanya konten statis, bahkan bisa saja kosong, & file JavaScript. Skrip di dalam file JavaScript ini nantinya bertugas mengambil data dari server & meng-update halaman HTML.

Teknik CSR ini memunculkan jenis aplikasi web yang disebut SPA (Single Page Application) yang nggak perlu berpindah halaman untuk menampilkan konten. Kebalikannya adalah MPA (Multi Page Application) di mana kalo user ingin melihat konten lain, browser harus mengirim rekues ke server untuk berpindah halaman.

Untuk melihat konten mana dari sebuah website yang dibuat di server & mana yang dibuat di sisi klien caranya gampang, non-aktifkan aja JavaScript di browser. Caranya kalo pakai Chrome, buka Console, terus ketik Cmd+Shift+P (Mac) atau Ctrl+Shift+P (windows/linux) terus pilih Disable JavaScript. Untuk mengaktifkan kembali, caranya sama hanya saja yang dipilih adalah Enable JavaScript.

Konten yang tetap muncul ketika JavaScript non-aktif adalah konten yang dibuat di server (SSR), sementara yang hanya muncul ketika JavaScript aktif adalah konten yang dibuat di klien (CSR). Sebagai contoh, di halaman web CNN Indonesia bisa kita liat banyak bagian yang kosong ketika JS non-aktif, artinya bagian-bagian itu ditampilkan dengan teknik CSR.

SPA vs MPA​

Kelebihan SPA dibanding MPA adalah SPA sangat responsif, hampir seperti aplikasi desktop biasa. Kekurangannya adalah di sisi SEO (Search Engine Optimization) karena penjelajah web (bot/crawler) dari search engine nggak menunggu sampai skrip JavaScript selesai meng-update konten halaman web. Jadi yang terbaca seringkali adalah halaman kosong.

Sebaliknya, MPA sangat bagus untuk SEO tapi kalo user pindah halaman, browser harus merekues halaman baru dari server. Pasti ada delay tapi ini bukan masalah besar di era internet cepat seperti sekarang ini.

SPA & MPA punya tempat masing-masing. Mana yang lebih bagus kita pakai tergantung kebutuhan. Di situs-situs e-commerce selalu ada beberapa bagian yang pakai MPA karena kebutuhan SEO tapi ada juga yang SPA misalnya halaman checkout & payment.