Digital Transformation
Prerendering
TL;DR: Prerendering adalah proses menghasilkan HTML siap-pakai untuk sebuah halaman sebelum diminta oleh pengunjung atau crawler. Pendekatan ini mempercepat First Contentful Paint dan memastikan mesin pencari serta AI Search mendapatkan konten lengkap tanpa harus menunggu JavaScript render.
Apa itu Prerendering?
Prerendering adalah teknik di mana server menghasilkan HTML final sebuah halaman lebih dahulu, lalu mengirim hasilnya saat ada request. Berbeda dengan client-side rendering (CSR), pengguna dan crawler tidak perlu menunggu browser mengeksekusi JavaScript untuk melihat konten. Teknik ini sering dipakai di framework modern seperti Next.js, Astro, dan Nuxt.
Analogi: prerendering ibarat menyiapkan kue sebelum tamu datang, sementara CSR ibarat baru memasak setelah pesanan masuk.
Jenis Prerendering
| Jenis | Kapan Dipakai | Trade-off |
|---|---|---|
| SSG (Static Site Generation) | Konten jarang berubah | Cepat, tapi update perlu rebuild |
| ISR (Incremental Static Regeneration) | Konten berubah berkala | Kombinasi static + revalidate timer |
| SSR (Server-Side Rendering) | Konten personal atau real-time | Selalu fresh, tapi TTFB lebih lambat |
| Edge Rendering | Audiens global, perlu latensi minimal | Eksekusi dekat user, butuh infrastruktur edge |
Kenapa Penting?
Dalam praktik membangun website bisnis dengan Next.js untuk klien, saya melihat dampak besar prerendering terhadap Core Web Vitals. LCP turun signifikan saat halaman utama dipindah dari CSR ke SSG atau ISR. Selain itu, crawler Google dan model AI Search lebih lengkap mengambil konten karena tidak terkendala render JavaScript.
Untuk marketer, kesimpulannya: jika halaman penting (landing page, halaman produk, blog) masih CSR penuh, kemungkinan besar Anda kehilangan indeksasi dan kecepatan tanpa sadar.
Pertanyaan Umum
Apakah prerendering selalu lebih baik dari client-side rendering?
Tidak selalu. Untuk dashboard internal atau halaman yang sangat personal, CSR masih masuk akal. Tapi untuk konten publik yang perlu di-SEO, prerendering hampir selalu menang.
Apa bedanya prerendering dengan SSR?
SSR adalah satu bentuk prerendering yang dilakukan saat request masuk. Prerendering umum bisa juga berarti SSG yang dijalankan saat build, sebelum request datang.
Istilah Terkait