Masalah: Blog Berjalan di Lokal, Tapi 500 di Server
Setelah berhasil mengatur SSL dan Docker, masalah baru muncul: halaman daftar blog bisa dibuka, tetapi saat artikel diklik, muncul pesan error: “TypeError: Cannot read properties of undefined (reading ‘render’)”.
Apa yang Salah?
Di Astro, terdapat dua cara utama untuk menangani halaman dinamis:
- Static Mode: Menggunakan
getStaticPaths()untuk membuat semua halaman saat build time. - Server Mode (SSR): Menggunakan
Astro.paramsuntuk mengambil data di setiap request.
Kesalahan fatal yang terjadi adalah kita menggunakan getStaticPaths() padahal konfigurasi Astro diatur ke output: 'server'. Akibatnya, props yang diharapkan tidak pernah terkirim ke komponen.
Solusi Perbaikan Kode
Kita harus mengubah cara pengambilan data di file [slug].astro. Dari yang sebelumnya statis menjadi dinamis menggunakan getEntry():
---
// SEBELUMNYA (STATIS - SALAH UNTUK SSR)
export async function getStaticPaths() { ... }
const { post } = Astro.props;
// SESUDAHNYA (DINAMIS - BENAR UNTUK SSR)
import { getEntry } from 'astro:content';
const { slug } = Astro.params;
const post = await getEntry('blog', slug);
if (!post) return Astro.redirect('/404');
const { Content } = await post.render();
---
Kenapa Rebuild Sering Gagal di Docker?
Selain masalah kode, ada satu lagi kendala: Docker Cache. Karena Docker mencoba menghemat waktu, dia seringkali tidak menyadari adanya perubahan kecil pada file Markdown di dalam folder src/content.
Solusinya adalah memastikan perintah COPY . . di Dockerfile berada di tempat yang tepat, atau melakukan build --no-cache jika perubahan benar-benar tidak terdeteksi.
Kini blog TechVerse sudah berjalan sempurna dengan sistem SSR yang responsif!