Beberapa Istilah dalam Aplikasi Web yang Sering Dipakai tetapi Jarang Disebut

Kalau kamu sudah cukup lama bermain di dunia web development, mungkin kamu pernah mendengar istilah seperti SPA, Full Width, Dynamic Page, Vanilla JavaScript, atau Headless. Masalahnya, istilah-istilah seperti ini sering dipakai oleh developer, UI/UX designer, frontend engineer, backend developer, bahkan klien, tetapi jarang benar-benar dijelaskan secara sederhana.

Padahal ketika seseorang berkata, "Saya mau website-nya full width", "Bikin SPA saja", "CMS-nya headless", atau "Jangan pakai framework, vanilla JavaScript saja", sebenarnya mereka sedang menjelaskan cara sebuah website dibangun, ditampilkan, dan berinteraksi dengan pengguna.

Di artikel ini saya akan membahas beberapa istilah model aplikasi web, style layout website, teknologi frontend, metode rendering, dan pola arsitektur web yang sangat sering muncul dalam proses pembangunan website atau aplikasi, tetapi sering dianggap terlalu biasa sampai akhirnya tidak pernah dibahas.

Daftar Isi

1. SPA (Single Page Application)
2. MPA (Multi Page Application)
3. Boxed dan Full Width
4. Dynamic Page
5. Static Page
6. Vanilla JavaScript
7. Headless
8. SSR (Server-Side Rendering)
9. CSR (Client-Side Rendering)
10. SSG (Static Site Generation)
11. ISR (Incremental Static Regeneration)
12. PWA (Progressive Web App)
13. Responsive dan Mobile-First
14. Component-Based
15. Monolithic dan Microservices
16. Kesimpulan

1. SPA (Single Page Application)

SPA atau Single Page Application adalah model aplikasi web yang secara konsep menggunakan satu halaman utama untuk menjalankan berbagai tampilan dan interaksi. Ketika pengguna berpindah menu, aplikasi tidak selalu melakukan proses memuat ulang seluruh halaman dari awal.

Contoh sederhananya begini. Kamu sedang membuka dashboard, kemudian menekan menu Data Pegawai. Pada website tradisional, browser bisa saja meminta halaman baru dari server. Pada SPA, aplikasi dapat mengambil data yang diperlukan lalu mengganti bagian tampilan tertentu tanpa melakukan reload penuh.

Framework seperti React, Vue, dan Angular sangat sering digunakan untuk membangun model seperti ini. Tetapi konsep SPA sendiri sebenarnya tidak mewajibkan penggunaan framework.

Contoh SPA sederhana dengan JavaScript:

<button onclick="showPage('home')">Home</button>
<button onclick="showPage('about')">About</button>

<div id="app"></div>

<script>
function showPage(page) {
  document.getElementById('app').innerHTML =
    page === 'home'
      ? '<h2>Halaman Home</h2>'
      : '<h2>Halaman About</h2>';
}
</script>

Contoh tersebut memang sangat sederhana, tetapi idenya sudah terlihat: satu halaman HTML, konten berubah tanpa reload penuh.

2. MPA (Multi Page Application)

Kalau SPA mempunyai satu shell aplikasi yang kemudian mengubah tampilan di dalamnya, maka MPA atau Multi Page Application lebih dekat dengan model website tradisional.

Setiap halaman biasanya merupakan dokumen yang berbeda. Ketika pengguna pindah dari halaman Beranda ke Profil, browser meminta halaman baru ke server.

Contoh sederhana MPA:

<nav>
  <a href="index.html">Home</a>
  <a href="about.html">About</a>
</nav>

Ketika link about.html diklik, browser benar-benar membuka dokumen HTML lainnya.

Model ini sangat umum pada website berita, company profile, blog, portal pemerintah, toko online, dan berbagai website yang setiap halamannya memiliki URL sendiri.

3. Boxed dan Full Width

Boxed berarti konten website dibatasi dalam sebuah area atau container dengan lebar tertentu. Sedangkan Full Width membuat sebuah section dapat menggunakan hampir seluruh lebar viewport.

Contoh Boxed

<div style="max-width:1200px; margin:auto;">
  <h2>Konten Website</h2>
  <p>Konten berada di dalam container.</p>
</div>

Contoh Full Width

<section style="width:100%;">
  <h2>Section Full Width</h2>
</section>

Dalam desain nyata, keduanya bahkan sering digabungkan. Background dibuat full width, sedangkan teks di dalamnya tetap menggunakan container boxed agar nyaman dibaca.

Boxed lebih terkontrol. Full Width lebih lega. Keduanya bukan soal mana yang paling modern, tetapi soal kebutuhan layout.

4. Dynamic Page

Dynamic Page adalah halaman website yang isi atau tampilannya dapat berubah berdasarkan data, pengguna, waktu, parameter URL, database, kondisi tertentu, atau proses dari aplikasi.

Contohnya halaman daftar berita. Kamu tidak perlu membuat file HTML baru secara manual untuk setiap berita. Data artikel disimpan di database, kemudian aplikasi mengambil data tersebut dan menghasilkan halaman secara dinamis.

Contoh PHP sederhana:

<?php
$nama = "Armin";
echo "<h2>Halo, $nama</h2>";
?>

Nilai yang tampil bisa berasal dari database, session, API, atau input pengguna. Inilah salah satu bentuk paling sederhana dari halaman dinamis.

5. Static Page

Kebalikan dari Dynamic Page adalah Static Page. Kontennya relatif tetap dan tidak dibuat berdasarkan perubahan database setiap kali halaman dibuka.

Contoh static HTML:

<h2>Tentang Kami</h2>
<p>Kami adalah perusahaan yang bergerak di bidang teknologi.</p>

Isi HTML tersebut akan tetap sama sampai seseorang mengubah file atau proses build menghasilkan versi baru.

Static Page cocok untuk halaman profil, landing page, dokumentasi, portofolio, atau informasi yang jarang berubah.

6. Vanilla JavaScript

Vanilla JavaScript berarti menggunakan JavaScript secara langsung tanpa framework atau library utama seperti React, Vue, atau Angular.

Contoh berikut mungkin terlihat sepele, tetapi justru inilah esensi Vanilla JavaScript:

<button id="btn">Klik Saya</button>

<script>
document.getElementById("btn").addEventListener("click", function () {
  alert("Tombol diklik!");
});
</script>

Tidak ada React. Tidak ada Vue. Tidak ada framework. Hanya JavaScript murni.

Vanilla JavaScript sangat cocok untuk proyek sederhana, widget interaktif, landing page, manipulasi DOM, atau aplikasi yang memang belum membutuhkan abstraction layer dari framework.

7. Headless

Headless adalah pendekatan di mana bagian backend atau pengelola konten dipisahkan dari bagian frontend yang dilihat pengguna.

Gambaran sederhananya seperti ini:

Frontend
   |
   | HTTP / API
   v
Headless CMS / Backend
   |
   v
Database

Frontend bisa dibuat menggunakan React, Vue, Svelte, HTML + JavaScript, atau teknologi lainnya. Backend cukup menyediakan data melalui API.

Contoh request API:

fetch("https://example.com/api/posts")
  .then(response => response.json())
  .then(data => {
    console.log(data);
  });

Itulah salah satu alasan pendekatan Headless CMS sering dipilih ketika satu sumber data harus dikonsumsi oleh banyak platform.

8. SSR (Server-Side Rendering)

Server-Side Rendering atau SSR berarti HTML halaman dihasilkan di server sebelum dikirim ke browser.

Secara sederhana alurnya seperti ini:

Browser
   |
   | Request
   v
Server
   |
   | Generate HTML
   v
Browser menerima HTML

Contoh konseptual menggunakan Node.js dan Express:

app.get("/", (req, res) => {
  res.send("<h1>Halo dari Server</h1>");
});

Pada framework modern, SSR dapat menjadi jauh lebih kompleks karena server juga dapat mengambil data, merender komponen, mengatur caching, dan melakukan berbagai optimasi sebelum HTML dikirim ke browser.

9. CSR (Client-Side Rendering)

Client-Side Rendering atau CSR berarti proses utama untuk membangun tampilan dilakukan di browser pengguna menggunakan JavaScript.

Contoh paling sederhana:

<div id="app"></div>

<script>
const data = {
  title: "Dashboard",
  user: "Armin"
};

document.getElementById("app").innerHTML = `
  <h1>${data.title}</h1>
  <p>Halo ${data.user}</p>
`;
</script>

HTML awal menyediakan container, kemudian JavaScript mengisi interface tersebut di sisi browser.

10. SSG (Static Site Generation)

Static Site Generation atau SSG adalah teknik menghasilkan halaman menjadi HTML statis pada saat proses build.

Contoh konseptualnya bisa dibayangkan seperti ini:

Data artikel
     |
     v
Build Process
     |
     v
artikel-1.html
artikel-2.html
artikel-3.html

Ketika website dipublikasikan, pengguna membaca file HTML hasil build tersebut. Server tidak harus membuat ulang seluruh halaman dari database pada setiap request.

11. ISR (Incremental Static Regeneration)

Incremental Static Regeneration atau ISR menggabungkan ide halaman statis dengan kemampuan memperbarui sebagian halaman secara berkala.

Gambaran sederhananya:

HTML statis
   |
   | sudah tersedia
   v
Pengguna mengakses halaman
   |
   | data sudah kadaluarsa?
   v
Regenerasi halaman
   |
   v
Versi baru disimpan

Konsep ini sangat menarik untuk website dengan jumlah halaman besar yang datanya berubah, tetapi tidak membutuhkan render ulang penuh pada setiap permintaan.

12. PWA (Progressive Web App)

Progressive Web App atau PWA adalah pendekatan untuk membuat website memiliki pengalaman yang semakin mendekati aplikasi.

Salah satu komponen penting PWA adalah service worker.

Contoh registrasi service worker:

if ("serviceWorker" in navigator) {
  navigator.serviceWorker.register("/sw.js")
    .then(() => console.log("Service Worker aktif"));
}

Service worker dapat digunakan untuk berbagai kebutuhan seperti caching dan pengalaman aplikasi tertentu, tergantung implementasinya.

13. Responsive dan Mobile-First

Responsive Design

Responsive Design membuat layout menyesuaikan ukuran layar.

Contoh media query:

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

@media (max-width: 768px) {
  .container {
    grid-template-columns: 1fr;
  }
}

Di desktop terdapat dua kolom. Ketika layar mengecil, layout berubah menjadi satu kolom.

Mobile-First

Pendekatan Mobile-First biasanya dimulai dari style untuk layar kecil, kemudian menambahkan perubahan untuk layar yang lebih besar.

.card {
  width: 100%;
}

@media (min-width: 768px) {
  .card {
    width: 50%;
  }
}

Dengan pendekatan ini, kebutuhan smartphone menjadi dasar desain sebelum layout diperluas ke tablet dan desktop.

14. Component-Based

Component-Based berarti interface dibangun dari bagian-bagian kecil yang bisa digunakan kembali.

Misalnya:

App
├── Navbar
├── Sidebar
├── Card
├── Table
├── Modal
└── Footer

Contoh komponen sederhana menggunakan JavaScript:

function Button(text) {
  return `<button>${text}</button>`;
}

document.body.innerHTML += Button("Simpan");

Framework modern kemudian membawa konsep ini jauh lebih jauh dengan state, props, lifecycle, event, composition, dan mekanisme rendering yang lebih kompleks.

15. Monolithic dan Microservices

Monolithic

Pada Monolithic Architecture, berbagai fungsi utama aplikasi berada dalam satu aplikasi utama.

Web Application
├── Login
├── User
├── Produk
├── Transaksi
└── Laporan

Untuk sistem tertentu, pendekatan ini justru lebih mudah dikembangkan dan dipelihara.

Microservices

Pada Microservices, fungsi aplikasi dapat dipisahkan menjadi service-service tersendiri.

API Gateway
   |
   +-- User Service
   |
   +-- Product Service
   |
   +-- Order Service
   |
   +-- Payment Service

Keuntungannya adalah setiap service dapat memiliki tanggung jawab yang lebih spesifik. Namun sistemnya juga menjadi lebih kompleks karena komunikasi antarservice, deployment, observability, keamanan, dan pengelolaan data harus diperhatikan.

Istilah Lain yang Juga Layak Kamu Kenal

Selain istilah-istilah utama di atas, masih ada beberapa istilah lain yang sering muncul dalam diskusi frontend, backend, UI/UX, dan arsitektur aplikasi web.

Istilah	Makna Sederhana
Jamstack	Pendekatan web yang menekankan frontend decoupled, API, dan asset yang dapat disajikan secara efisien.
API-First	Pengembangan sistem yang menempatkan API sebagai kontrak penting sejak awal.
Serverless	Menjalankan fungsi backend melalui layanan terkelola tanpa mengurus server secara langsung.
SSR	HTML utama dirender di server.
CSR	Tampilan utama dibangun di browser.
SSG	HTML dibuat pada saat build.
ISR	Halaman statis dapat diperbarui secara incremental.
Hydration	JavaScript mengaktifkan kembali HTML yang sudah dirender agar menjadi interaktif.
Lazy Loading	Resource atau komponen dimuat ketika memang diperlukan.
Code Splitting	Bundle JavaScript dipecah menjadi bagian yang lebih kecil agar tidak semuanya dimuat sekaligus.
Design System	Kumpulan aturan, komponen, warna, typography, dan pola desain yang konsisten.
Atomic Design	Pendekatan menyusun UI dari unit kecil hingga menjadi komponen dan halaman yang lebih kompleks.
Progressive Enhancement	Membangun fitur dasar terlebih dahulu lalu menambahkan kemampuan tambahan untuk perangkat/browser yang mendukung.

Perbedaan Istilah-Istilah Ini Secara Sederhana

Istilah	Sebenarnya Membahas Apa?	Contoh Sederhana
SPA	Model aplikasi	Dashboard interaktif
MPA	Model banyak halaman	Blog atau portal berita
Boxed	Gaya layout	Konten dalam container
Full Width	Gaya layout	Section memenuhi lebar layar
Dynamic Page	Cara konten dihasilkan	Artikel dari database
Static Page	Halaman dengan konten relatif tetap	Halaman profil
Vanilla JavaScript	Cara menggunakan JavaScript	JavaScript tanpa framework utama
Headless	Pemisahan backend dan frontend	CMS + frontend melalui API
SSR	Rendering di server	HTML dibuat server
CSR	Rendering di browser	JavaScript membangun UI
SSG	Membuat HTML saat build	Blog statis
ISR	Regenerasi halaman statis	Halaman diperbarui berkala
PWA	Pengalaman web seperti aplikasi	Website installable
Responsive	Adaptasi ukuran layar	Desktop, tablet, mobile
Mobile-First	Strategi desain	Mulai dari tampilan mobile
Component-Based	Cara menyusun interface	UI dibagi menjadi komponen
Monolithic	Arsitektur sistem	Satu aplikasi utama
Microservices	Arsitektur terdistribusi	Banyak service terpisah

Kenapa Istilah-Istilah Ini Penting Dipahami?

Memahami istilah seperti SPA, Full Width, Dynamic Page, Vanilla JavaScript, Headless, SSR, CSR, SSG, PWA, dan istilah lainnya bukan sekadar untuk terlihat keren ketika berdiskusi dengan sesama programmer.

Istilah tersebut membantu kita menjelaskan sebuah produk secara lebih cepat dan lebih presisi.

Contohnya, daripada menjelaskan panjang lebar:

"Website-nya nanti admin bisa mengelola konten, kemudian frontend terpisah, datanya dikirim melalui API, dan tampilannya dibuat menggunakan framework JavaScript."

Kita bisa mengatakan:

"Kita buat Headless CMS dengan frontend SPA berbasis API."

Satu kalimat langsung menggambarkan arah teknologinya.

Begitu pula ketika seorang designer berkata "layout-nya full width tapi konten tetap boxed". Developer yang memahami istilah tersebut akan langsung memiliki gambaran tentang struktur layout yang diinginkan.

Jadi, Mana yang Paling Bagus?

Jawabannya sebenarnya agak menyebalkan: tidak ada satu model yang paling bagus untuk semua aplikasi.

Website company profile sederhana tidak harus dibuat menjadi SPA.

Blog tidak harus menggunakan microservices.

Dashboard internal tidak harus memakai arsitektur yang super rumit.

CMS tidak harus selalu monolithic.

Landing page tidak harus menggunakan framework JavaScript besar.

Bahkan Vanilla JavaScript masih sangat layak digunakan apabila kebutuhan aplikasinya memang sederhana.

Memilih teknologi seharusnya dimulai dari kebutuhan: siapa penggunanya, seberapa kompleks sistemnya, bagaimana kebutuhan SEO-nya, bagaimana datanya berubah, bagaimana proses deployment-nya, berapa biaya infrastrukturnya, dan siapa yang akan memeliharanya.

Teknologi itu alat. Jangan sampai kita membeli palu hanya karena palunya keren, lalu semua benda yang kita lihat dianggap paku.

Kesimpulan

Dalam proses membangun website atau aplikasi, sebenarnya ada banyak istilah yang menggambarkan style, model, layout, rendering, frontend, dan arsitektur sistem. Beberapa di antaranya sangat sering digunakan, tetapi jarang disebut secara eksplisit.

SPA membahas model aplikasi satu halaman, sedangkan MPA menggunakan banyak halaman. Boxed dan Full Width lebih berhubungan dengan layout. Dynamic Page dan Static Page membahas bagaimana konten halaman disajikan. Vanilla JavaScript menjelaskan penggunaan JavaScript tanpa framework utama.

Sementara itu, Headless berbicara tentang pemisahan frontend dan backend atau content management. Kemudian ada SSR, CSR, SSG, dan ISR yang menjelaskan pendekatan rendering. PWA, Responsive, Mobile-First, dan Component-Based berada pada area pengalaman pengguna dan cara membangun interface, sedangkan Monolithic dan Microservices lebih dekat dengan arsitektur sistem.

Semakin lama kamu berkecimpung di dunia teknologi, semakin kamu sadar bahwa programmer sebenarnya punya banyak "bahasa rahasia" berupa istilah-istilah seperti ini. Dan ketika kamu sudah memahami artinya, percakapan antara developer, designer, system analyst, client, dan stakeholder biasanya menjadi jauh lebih mudah.

Jadi lain kali ada yang bilang, "Bang, saya mau web-nya full width, dynamic, responsive, frontend-nya SPA, backend headless, tapi jangan terlalu kompleks," jangan langsung panik.

Setidaknya sekarang kamu tahu bahwa kalimat tersebut bukan mantra pemanggil jin programmer. Itu cuma sekumpulan istilah teknis yang kebetulan dijejerkan dalam satu napas.

Untuk referensi lebih lanjut mengenai konsep JavaScript dan web development, kamu juga bisa membaca dokumentasi JavaScript di MDN Web Docs.