Belajar SvelteKit - Server-side Rendering & Static Generation

#Pendahuluan

Salah satu keunggulan SvelteKit adalah kontrol granular atas cara setiap halaman dirender. Episode 21 membahas server-side rendering dan static generation: bagaimana SSR bekerja, kapan menghasilkan HTML statis, bagaimana streaming mempercepat tampil, dan bagaimana memilih mode yang tepat untuk tiap kasus.

Ketiga mode ini tidak harus dipilih satu untuk semua. Satu aplikasi bisa memakai SSG untuk halaman marketing, SSR untuk halaman dinamis, dan stream untuk halaman yang datanya lambat. Keputusan dibuat per route, di mana manfaatnya paling besar.

Setelah episode ini, kalian memahami trade-off tiap mode dan bisa mengonfigurasi rendering dengan presisi.

#SSR Fundamentals dan Mode Rendering

#Memahami Mode di SvelteKit

SvelteKit memiliki empat mode yang saling independen: ssr menentukan apakah halaman dirender di server, csr menentukan apakah interaktivitas di-hydrate di client, prerender menentukan apakah HTML dihasilkan saat build, dan trailingSlash mengatur format URL. Masing-masing bisa diatur per route atau global.

Opsi rendering per route

export const ssr = true;
export const csr = true;
export const prerender = false;

#Kapan SSR Diperlukan

SSR menghasilkan HTML di server untuk setiap request. Ia penting untuk konten dinamis yang bergantung pada pengguna, session, atau data yang sering berubah. SEO dan shareability terbantu karena konten sudah ada di HTML, dan aplikasi tetap berfungsi saat JavaScript gagal dimuat.

#Static Site Generation dan Incremental Prerendering

#Prerender Seluruh Situs

Situs dengan konten yang berubah jarang, seperti dokumentasi atau blog, cocok untuk SSG penuh. Dengan export const prerender = true pada layout akar, SvelteKit merayapi semua route dan menghasilkan file statis. Tidak ada server yang dijalankan saat request; semua disajikan dari CDN. Untuk output murni statis, pasang npm install -D @sveltejs/adapter-static dan gunakan adapter tersebut.

Adapter statis untuk output murni

import adapter from "@sveltejs/adapter-static";
 
export default {
    kit: {
        adapter: adapter({
            pages: "build",
            assets: "build",
            fallback: "index.html"
        })
    }
};

#Prerender Parsial dan Perbarui Bertahap

Tidak semua halaman harus diprerender sekaligus. Route yang datanya berubah berkala bisa diprerender dan dijadwalkan build ulang, sementara route lain tetap SSR. Platform modern juga mendukung incremental build, di mana hanya halaman yang berubah yang dibangun ulang.

#Streaming dan Partial Hydration

#Streaming dengan Promise di Load

Streaming mengirim shell halaman segera setelah siap, lalu mengisi bagian lambat saat datanya tiba. Pengguna melihat konten utama lebih cepat, sementara bagian sekunder dimuat tanpa memblokir tampilan pertama.

Menggabungkan data cepat dan lambat

export const load = async ({ fetch, params }) => {
    return {
        artikel: await fetch(`/api/artikel/${params.id}`).then((r) => r.json()),
        komentar: fetch(`/api/artikel/${params.id}/komentar`).then((r) => r.json())
    };
};

#Menampilkan Data Stream dengan Await

Di komponen, bagian yang nilainya berupa promise ditampilkan dengan {#await}. SvelteKit menangani penyatuan data streaming antara server dan client, sehingga perubahan state saat data tiba terjadi secara mulus.

<script>
    let { data } = $props();
</script>
 
{#await data.komentar}
    <p>Memuat komentar...</p>
{:then komentar}
    <ul>
        {#each komentar as k}
            <li>{k.isi}</li>
        {/each}
    </ul>
{/await}

#Kapan Memakai SSR vs SSG

#Panduan Keputusan Sederhana

Mulai dari pertanyaan dasar: apakah halaman perlu data per request? Jika tidak dan konten jarang berubah, prerender. Jika butuh data pengguna atau data real-time, gunakan SSR. Jika sebagian cepat dan sebagian lambat, gabungkan SSR dengan streaming.

#Menghindari Kesalahan Umum

Jangan memakai SSG untuk halaman yang datanya personal, karena setiap pengguna akan menerima HTML yang sama. Sebaliknya, jangan memakai SSR untuk halaman yang datanya statis — kalian membayar prosesor server untuk menghasilkan output yang bisa dihasilkan sekali di build. Pilih berdasarkan kebutuhan data, bukan kebiasaan.

#Penutup

Inti yang harus dibawa pulang:

• ssr, csr, dan prerender diatur independen per route.
• SSG menghasilkan HTML statis saat build; cocok untuk konten jarang berubah.
• SSR penting untuk data dinamis, personal, atau real-time.
• Streaming mengirim shell halaman lebih dulu dan mengisi bagian lambat kemudian.
• Data stream ditampilkan dengan {#await} di komponen.
• Pilih mode berdasarkan kebutuhan data, bukan kebiasaan.

Di episode 22 selanjutnya kita membahas observability & monitoring: memantau performa dan error runtime, pelaporan error dengan Sentry, analytics dan pelacakan perilaku pengguna, serta dukungan produksi dan manajemen insiden.