Statis vs on-demand — memilih model render

Astro memberimu tiga pilihan per halaman, bukan satu pilihan untuk seluruh situs. Untuk portal berita, memilih dengan benar per halaman itulah seluruh permainannya.

Tiga model, satu tabel

Konfigurasi yang dipakai portal ini

// astro.config.mjs
import { defineConfig } from "astro/config";
import node from "@astrojs/node";
import vue from "@astrojs/vue";

export default defineConfig({
  site: "https://portal.contoh.id",
  output: "server",
  adapter: node({ mode: "standalone" }),
  integrations: [vue()],
});

---
// src/pages/tentang.astro — halaman yang tidak pernah berubah
export const prerender = true;
---

Jebakan yang paling sering: halaman statis tidak punya request

---
// TIDAK BEKERJA di halaman prerender. Diam, tanpa error.
const sesi = Astro.cookies.get("sesi");
const member = sesi ? await ambilMember(sesi.value) : null;
---
{member ? <p>Halo, {member.nama}</p> : <a href="/masuk">Masuk</a>}

Di halaman yang di-prerender, kode ini berjalan saat build — jauh sebelum ada pembaca. Tidak ada cookie untuk dibaca, jadi member selalu null, dan setiap pembaca melihat tautan "Masuk" termasuk yang sudah login. Ia tidak melempar error; ia hanya salah.

Astro akan memperingatkanmu kalau kamu memakai API yang jelas-jelas butuh request — tapi peringatan itu mudah tenggelam di antara keluaran build lain. Yang lebih dapat diandalkan adalah kebiasaan: apa pun yang bergantung pada siapa pembacanya tidak boleh ada di halaman yang di-cache, statis maupun on-demand-yang-di-cache. Tempatnya di server island.

Kenapa on-demand + CDN, bukan prerender penuh

Untuk portal dengan 200 ribu artikel dan puluhan artikel baru per hari, prerender penuh berarti:

• Build berjam-jam, jadi kamu hanya sanggup build beberapa kali sehari.
• Artikel breaking news menunggu build berikutnya — tidak bisa diterima di ruang redaksi.
• Perbaikan ketik pada satu artikel butuh membangun ulang seluruh situs.
• Artefak build ratusan ribu berkas yang harus disalin ke tiap task ECS setiap deploy.

On-demand dengan cache edge memberi hasil yang menyerupainya dari sisi pembaca — HTML dari edge, tanpa menyentuh origin — tapi artikel baru hidup begitu editor menekan Terbitkan, dan perbaikan cukup purge satu cache tag. Ini kombinasi yang dipakai hampir semua portal berita besar, dan yang akan kita bangun di Fase 8.

Header cache yang membuatnya bekerja

---
export const prerender = false;

const artikel = await ambilArtikelPublik(Astro.params.slug!);
if (!artikel) return Astro.rewrite("/404");

// Cache di edge 5 menit, boleh disajikan basi 1 hari sambil disegarkan.
Astro.response.headers.set(
  "Cache-Control",
  "public, max-age=0, s-maxage=300, stale-while-revalidate=86400",
);
// Supaya bisa di-purge per artikel saat editor menyunting.
Astro.response.headers.set("Cache-Tag", `artikel-${artikel.id},kategori-${artikel.kategoriSlug}`);
---

Peta keputusan untuk portalmu