Belajar Astro - Caching & Request Performance

#Pendahuluan

Setelah konten dan autentikasi aman, saatnya memastikan semuanya sampai ke pengguna secepat mungkin. Episode 14 ini membahas caching dan performa request: bagaimana browser dan CDN menyimpan salinan halaman, kapan cache harus dibatalkan, dan bagaimana memberi tahu browser resource apa yang akan dibutuhkan selanjutnya.

Kunci yang perlu dipahami: cache bukan penghematan — cache adalah kecepatan. Semakin banyak request yang dilayani dari cache, semakin sedikit waktu tunggu pengguna. Untuk situs statis Astro, hampir seluruh konten bisa di-cache agresif.

Kalian akan belajar strategi cache untuk mode statis dan SSR, integrasi CDN, prefetching, serta optimasi payload.

#Cache Strategies untuk Konten Statis dan SSR

#Cache Konten Statis

Konten statis dari npm run build — HTML, CSS, JavaScript, gambar — bisa di-cache agresif. Karena file ber-hash, gunakan cache panjang:

Cache-Control: public, max-age=31536000, immutable

Nilai max-age=31536000, immutable memberi tahu browser untuk tidak memeriksa ulang file selama setahun. Nama file yang berubah otomatis memaksa browser mengambil versi baru — aman dan cepat.

#Cache Halaman HTML Statis

Untuk halaman HTML statis, atur cache pendek agar pembaruan konten cepat tersebar:

Cache-Control: public, max-age=60, stale-while-revalidate=3600

Direktif stale-while-revalidate=3600 memungkinkan browser memakai versi lama hingga satu jam sambil mengambil versi baru di latar belakang — halaman selalu terasa cepat tanpa menunggu pembaruan.

#Cache untuk Halaman SSR

Halaman SSR bersifat dinamis, tetapi masih bisa di-cache dengan hati-hati. Terapkan Cache-Control di respons server, misalnya max-age=60 untuk halaman yang jarang berubah per user, atau set private untuk konten personal:

Set header cache di halaman SSR

---
Astro.response.headers.set(
  "Cache-Control",
  "public, max-age=60",
);
---

Kode di atas menyetel header Cache-Control langsung dari halaman SSR. Untuk konten per-user, ganti menjadi private agar tidak di-cache di CDN bersama.

#CDN Integration dan Cache Invalidation

#CDN sebagai Lapisan Pertama

CDN menyimpan salinan halaman di server yang dekat dengan pengguna di seluruh dunia. Setiap deployment, CDN harus tahu konten mana yang berubah — inilah cache invalidation. Platform hosting modern seperti Vercel dan Netlify otomatis menandai file lama saat deploy baru. Untuk CDN kustom, gunakan purge API atau upload ulang file ber-hash.

#Strategi CDN yang Benar

Kombinasi ideal: HTML statis di-cache pendek, aset ber-hash di-cache setahun, dan halaman SSR di-cache sesuai dinamikanya. Periksa efektivitas cache lewat header respons menggunakan curl:

curl -sI https://situs-kalian.dev/ | grep -i cache-control

curl -sI menampilkan header respons. Verifikasi Cache-Control sudah sesuai dengan yang kalian harapkan setelah deployment.

#Prefetching dan Resource Hints

#Memakai @astrojs/prefetch

Astro menyediakan integrasi @astrojs/prefetch yang otomatis melakukan prefetch pada link halaman saat pengguna mendekatinya:

npx astro add prefetch

Setelah integrasi terpasang, Astro menambahkan prefetch untuk seluruh link saat mouse mendekat atau layar menyentuh link — halaman berikutnya terasa instan tanpa JavaScript manual.

#Resource Hints Manual

Untuk kontrol lebih rinci, gunakan resource hints HTML:

<link rel="preload" href="/assets/font.woff2" as="font" />
<link rel="preconnect" href="https://fonts.googleapis.com" />

<link rel="preconnect" ...> membuka koneksi awal ke domain eksternal, dan preload mengambil aset kritis lebih awal. Keduanya mempercepat waktu sampai aset siap digunakan.

#Optimasi Payload Jaringan dan Page Speed

#Mengurangi Berat Halaman

Setiap byte yang tidak dikirim adalah byte yang tidak menunggu. Ulangi kebiasaan dari episode 7 dan 9: minimalkan JavaScript lewat hydration parsial, optimasi gambar dengan astro:assets, dan bersihkan CSS yang tidak terpakai.

#Mengukur dengan Web Vitals

Ukur dampak semua strategi ini dengan Core Web Vitals: LCP untuk kecepatan konten utama, CLS untuk stabilitas layout, dan INP untuk responsivitas interaksi. Episode 15 akan membahas profiling lebih dalam, dan episode 22 membahas pemantauan jangka panjang.

#Penutup

Episode 14 menguatkan lapisan performa jaringan: strategi cache untuk konten statis, HTML, dan SSR, integrasi CDN dengan cache invalidation yang tepat, prefetching dengan @astrojs/prefetch dan resource hints, serta optimasi payload halaman.

Inti yang harus dibawa pulang:

• Aset ber-hash di-cache setahun dengan immutable.
• HTML statis di-cache pendek dengan stale-while-revalidate.
• Halaman SSR personal memakai cache private.
• CDN otomatis diinvalidasi platform; CDN kustom butuh purge.
• @astrojs/prefetch membuat navigasi antar halaman terasa instan.
• curl -sI adalah cara cepat memverifikasi header cache.

Di episode 15 selanjutnya kita akan membahas performance optimization: profiling dengan browser tools dan Lighthouse, mengurangi payload JavaScript dan meminimalkan hydration, preloading aset kritis, serta build-time optimization dan incremental builds. Angka performa kalian akan menjadi dasar keputusan desain.