Tujuan Pembelajaran

Memahami perbedaan MPA, SPA, SSR, dan SSG
Bisa memilih arsitektur yang tepat

Analogi

Diagram


      MPA = Buku biasa (tiap halaman baru)
SPA = Aplikasi Mobile (1 halaman, dinamis)
SSR = Surat Kabar (sudah jadi saat dikirim)
SSG = Buku Cetak (dibuat sebelumnya)

Empat pendekatan berbeda untuk membangun web

Penjelasan Konsep

Ada empat pendekatan utama untuk membangun web modern:

MPA (Multi-Page Application)

Setiap klik = request halaman baru ke server. Contoh: Wikipedia.

✅ SEO bagus, simple
❌ Full page reload, tidak responsif

SPA (Single-Page Application)

Satu halaman, konten diubah dengan JavaScript. Contoh: Gmail.

✅ Responsif, experience seperti aplikasi
❌ SEO challenging, initial load lambat

SSR (Server-Side Rendering)

Server render HTML saat request. Di Next.js modern, ini biasanya dilakukan dengan App Router dan Server Components.

✅ SEO bagus, initial load cepat
❌ Perlu strategi cache dan server capacity

SSG (Static Site Generation)

HTML di-generate saat build time atau direvalidasi ulang. Cocok untuk konten yang jarang berubah.

✅ Cepat, bisa di-host di CDN
❌ Tidak cocok untuk data yang sangat personal atau real-time

Catatan: getServerSideProps dan getStaticProps adalah API Pages Router. Untuk project Next.js baru, pelajari App Router terlebih dahulu.

Inti yang Perlu Dipahami

Bagian ini berfokus pada memahami perbedaan MPA, SPA, SSR, dan SSG., dan bisa memilih arsitektur yang tepat. Jangan terburu-buru menghafal istilahnya. Lebih penting untuk memahami peran setiap konsep dan kapan konsep itu muncul dalam pekerjaan web development.

Saat membaca MPA vs SPA vs SSR vs SSG, gunakan tujuan belajar sebagai penanda arah. Kalau kamu sudah bisa menjelaskan tujuan itu dengan kata-katamu sendiri, berarti fondasinya mulai terbentuk.

Cara Membayangkannya

Empat pendekatan berbeda untuk membangun web. Analogi ini dipakai supaya konsep teknis tidak terasa melayang. Hubungkan setiap istilah dengan perannya: siapa yang meminta, siapa yang memproses, data apa yang berpindah, dan hasil apa yang diharapkan.

Kalau analoginya sudah terasa masuk akal, barulah lihat istilah teknisnya. Cara ini membuat materi lebih mudah dipahami daripada langsung menghafal definisi.

Saat Melihat Contoh Kode

Contoh kode pada chapter ini memakai bahasa tsx. Bacalah contoh kode sebagai ilustrasi alur, bukan sebagai bagian yang harus langsung dihafal. Baris 1-10: Server Component fetch data di server dengan revalidation. Baris 13-17: Route Handler menggantikan API route Pages Router untuk API internal.

Perhatikan nama fungsi, urutan langkah, dan data yang berpindah. Biasanya tiga hal itu sudah cukup untuk memahami hubungan antara teori dan praktik.

Konteks dalam Perjalanan Belajar

Setiap konsep di platform ini dipilih karena dipakai di industri. Fokus pada pemahaman, bukan hafalan.

Kamu sedang membangun skill inti. Setelah bagian ini, kamu bisa memilih spesialisasi sesuai minat: frontend, backend, atau DevOps.

Gunakan pertanyaan reflektif dan prompt AI di akhir chapter sebagai latihan aktif. Membaca saja tidak cukup — kamu perlu menjelaskan ulang dengan kata-katamu sendiri.

Contoh Kode

tsx

// Next.js App Router — Server Component
// app/products/page.tsx
export default async function ProductsPage() {
  const res = await fetch('https://api.example.com/products', {
    next: { revalidate: 60 }, // cache + revalidate seperti ISR
  });
  const products = await res.json();

  return <ProductList products={products} />;
}

// Route Handler untuk API internal
// app/api/products/route.ts
export async function GET() {
  const products = await db.product.findMany();
  return Response.json(products);
}

// Pages Router legacy: getServerSideProps/getStaticProps masih didukung,
// tetapi sebaiknya diberi label jelas saat dipakai di project lama.

Penjelasan Kode

Baris 1-10: Server Component fetch data di server dengan revalidation. Baris 13-17: Route Handler menggantikan API route Pages Router untuk API internal.

Prompt AI

Jelaskan kapan menggunakan SSR, SSG, dan revalidation di App Router.

Pertanyaan Reflektif

Analisis website yang sedang kamu bangun. MPA, SPA, SSR, atau SSG?