Belajar Astro - Static Site Generation & SSR

#Pendahuluan

Kita sudah menyentuh model rendering di beberapa episode: statis di episode 5 dan 6, server di episode 6 dan 13. Episode 21 ini mempertemukan semuanya dalam satu diskusi yang menyeluruh — kapan memakai static site generation, kapan server-side rendering, dan bagaimana mode hybrid menggabungkan keduanya.

Keputusan ini adalah salah satu yang paling berdampak pada arsitektur situs kalian: menentukan biaya hosting, kecepatan halaman, dan kemudahan deployment. Memahami trade-off-nya secara sadar adalah ciri engineer yang matang.

Episode ini juga membahas pembaruan inkremental ala ISR dan preview mode, dua fitur yang menjembatani dunia statis dan dinamis.

#Static Site Generation Best Practices

#Kekuatan SSG

Static site generation (SSG) merender seluruh halaman menjadi HTML saat build time. Keunggulannya langsung terlihat: halaman dikirim dari CDN tanpa runtime server, waktu muat sangat cepat, biaya hosting rendah, dan keamanan lebih sederhana karena tidak ada kode yang dieksekusi di server.

#Praktik Terbaik SSG

Agar SSG berjalan optimal:

• Pindahkan sebanyak mungkin komputasi ke build time: sorting, indexing, kalkulasi.
• Gunakan content collections dan getStaticPaths untuk halaman dinamis yang tetap statis.
• Batasi JavaScript dengan partial hydration (episode 7).
• Terapkan cache agresif untuk aset (episode 14).

SSG dengan banyak rute statis

---
export async function getStaticPaths() {
  const artikel = await getCollection("blog");
  return artikel.map((item) => ({
    params: { slug: item.id },
    props: { item },
  }));
}
 
const { item } = Astro.props;
---
 
<article>
  <h1>{item.data.title}</h1>
</article>

Pola di atas membangun satu file HTML untuk setiap artikel saat build — ribuan artikel menjadi ribuan file statis yang siap melayani jutaan pengunjung tanpa server.

#SSR dan Hybrid Deployment Models

#Kapan Mode Server Diperlukan

Server-side rendering menghasilkan HTML per request. Mode ini diperlukan ketika: konten berbeda per user, butuh autentikasi di server (episode 13), membutuhkan data real-time, atau memproses form. Pasang adapter (episode 8) untuk mengaktifkannya.

#Mode Hybrid di Astro

Hybrid adalah titik manis: halaman dirender statis secara default, dan hanya halaman tertentu yang dirender di server. Setel prerender = true untuk halaman statis, atau sebaliknya nonaktifkan per halaman:

Mode hybrid di astro.config

import { defineConfig } from "astro/config";
import node from "@astrojs/node";
 
export default defineConfig({
  output: "hybrid",
  adapter: node({ mode: "standalone" }),
});

Dengan output: "hybrid", halaman tanpa prerender = true dirender statis, dan halaman dengan export const prerender = false atau logika server di dalamnya dirender per request. Kalian mendapat kecepatan statis di sebagian besar situs dan fleksibilitas server hanya di bagian yang membutuhkannya.

#ISR-Like Incremental Updates dan Preview

#Pembaruan Inkremental

Incremental Static Regeneration (ISR) adalah pola pembaruan halaman statis tanpa build penuh — populer dari Next.js. Di Astro, pendekatan serupa dicapai dengan kombinasi: content layer yang mengambil data, cache, dan rebuild otomatis.

Pola umum untuk konten yang berubah sesekali: setel Cache-Control pendek pada halaman SSR, lalu CDN melayani versi statis yang segar:

Pembaruan inkremental ala ISR

---
export const prerender = false;
Astro.response.headers.set(
  "Cache-Control",
  "public, max-age=300, stale-while-revalidate=600",
);
---
 
<h1>Statistik terbaru</h1>

Halaman ini dirender di server paling lambat setiap 5 menit, dan pengunjung selalu mendapat versi yang tidak lebih tua dari 10 menit. Perpaduan max-age dan stale-while-revalidate menghasilkan pengalaman "near-static" tanpa build ulang penuh.

#Preview Mode

Preview mode memungkinkan editor melihat konten draf sebelum publish. Di Astro, pola yang umum: parameter rahasia di URL memicu rendering server yang menampilkan konten draf dari CMS, sementara halaman publik tetap statis. Episode 11 sudah membahas integrasi CMS-nya — di sini kalian tinggal menghubungkannya dengan mode server.

#Use Cases: Statis vs SSR

#Pedoman Memilih

Gunakan tabel keputusan sederhana ini:

Konten publik yang jarang berubah  → Statis
Konten personal per user          → SSR
Blog, dokumentasi, landing page   → Statis
Dashboard, search real-time       → SSR
Sebagian besar, sesekali dinamis  → Hybrid

Jika ragu, mulai dari statis. Hampir semua situs konten berjalan sangat baik sebagai situs statis, dan menambahkan SSR nanti tidak mengharuskan menulis ulang seluruh project.

#Kombinasi Nyata

Situs nyata biasanya campuran: halaman marketing statis, halaman member SSR dengan autentikasi, dan halaman laporan hybrid dengan cache pendek. Episode 22 dan 23 akan melengkapi dengan pemantauan dan keputusan arsitektur jangka panjang.

#Penutup

Episode 21 menyatukan model rendering Astro: best practices SSG dengan komputasi di build time, mode SSR dan hybrid dengan adapter, pembaruan inkremental ala ISR melalui kombinasi cache, serta preview mode dan pedoman memilih statis versus SSR.

Inti yang harus dibawa pulang:

• SSG merender HTML di build time: cepat, murah, dan aman.
• SSR dibutuhkan untuk konten personal, auth, atau data real-time.
• Hybrid membuat sebagian besar halaman statis dengan pengecualian server.
• prerender mengontrol rendering per halaman di mode hybrid.
• Kombinasi cache menghasilkan pembaruan inkremental ala ISR.
• Mulai dari statis; tambahkan SSR hanya jika kebutuhan terbukti.

Di episode 22 selanjutnya kita akan membahas observability dan monitoring: memantau performa halaman dan pengalaman pengguna, error reporting dengan analytics klien, pelacakan metrik build dan deployment, serta dukungan produksi dan incident response. Situs kalian akan terjaga setelah rilis.