Belajar SvelteKit - Caching & Performance

#Pendahuluan

Performa tidak hanya soal kecepatan kode, tetapi juga seberapa pintar aplikasi menghindari kerja berulang. Episode 14 membahas caching dan performa di SvelteKit: caching headers, revalidation, prerendering, streaming, edge caching lewat CDN, serta cara menetapkan dan memantau performance budget.

Kunci dari caching adalah menyeimbangkan kesegaran data dan latensi. Data yang jarang berubah boleh di-cache lama; data yang sering berubah butuh revalidation. SvelteKit memberi kontrol granular di level route dan respons, sehingga kebijakan caching bisa disesuaikan per halaman.

Setelah episode ini, kalian bisa memangkas waktu respons signifikan dengan mengatur header yang benar, memilih prerender di tempat yang tepat, dan menjaga situs tetap cepat dalam skala besar.

Satu hal penting: caching bukan pengganti kecepatan, melainkan pengali. Pastikan kode dasar sudah efisien sebelum mengandalkan cache untuk menutupi kelemahan.

#Caching Headers dan Revalidation

#Mengatur Cache-Control di Load

Header Cache-Control memberi tahu browser dan CDN berapa lama respons boleh dipakai ulang. Di load function server, kalian bisa mengaturnya dengan setHeaders yang tersedia di event.

Cache header di load function

export const load = async ({ setHeaders }) => {
    const data = await ambilData();
 
    setHeaders({
        "Cache-Control": "public, max-age=300, stale-while-revalidate=60"
    });
 
    return { data };
};

Nilai max-age=300 berarti respons valid selama lima menit. stale-while-revalidate=60 mengizinkan pengiriman respons lama sambil memuat ulang data di latar belakang, sehingga pengguna tidak pernah menunggu saat cache kedaluwarsa.

#Revalidation di CDN dan Platform

Untuk respons yang di-cache CDN, tambahkan s-maxage atau gunakan mekanisme revalidasi platform seperti x-sveltekit-cache. Setiap platform hosting punya antarmuka berbeda, jadi baca dokumentasinya. Prinsipnya sama: menentukan berapa lama cache bertahan dan bagaimana cache diperbarui saat data berubah. Sebagai gambaran, Vercel menyediakan pengaturan caching di dashboard-nya, sementara Cloudflare dikelola lewat dashboard atau npx wrangler pages project list untuk melihat daftar project Pages.

#Static Generation dan Prerendering

#Prerender Halaman Statis

Halaman yang tidak bergantung pada request bisa diprerender pada waktu build. Hasilnya file HTML statis yang disajikan langsung dari CDN tanpa menjalankan server — waktu respons terendah yang bisa dicapai.

Prerender untuk halaman statis

export const prerender = true;

Tambahkan satu baris ini di +page.js atau +layout.js. SvelteKit merayapi route yang tercantum di entries dan menghasilkan HTML untuk masing-masing. Pastikan halaman yang diprerender tidak memakai API yang spesifik per request.

#Streaming Data di Load

Streaming memungkinkan halaman dikirim sebelum semua data siap. Bagian penting dirender lebih dulu, sementara bagian lambat seperti komentar atau rekomendasi mengisi kemudian. Di SvelteKit, kembalikan sebuah promise dari load function untuk mengaktifkannya.

Load dengan data yang di-stream

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

SvelteKit membungkus promise ini sehingga tetap berjalan pada SSR dan hydration. Di sisi client, bagian yang masih pending ditampilkan dengan {#await}, dan seluruh prosesnya transparan bagi pengembang.

#Edge Caching dan Integrasi CDN

#Menempatkan Aset di CDN

Aset statis seperti gambar, font, dan file di folder static paling baik disajikan dari CDN. Platform seperti Vercel, Cloudflare Pages, dan Netlify menangani ini otomatis. Untuk self-host, pasang CDN di depan server atau unggah aset ke object storage yang terhubung CDN.

npm run build
ls -la build/client

#Cache Aset Statis dengan Header Panjang

Aset yang diberi hash unik per versi bisa di-cache tanpa batas waktu karena nama filenya berubah saat konten berubah. SvelteKit menghasilkan nama aset ber-hash saat build. Set header Cache-Control: public, max-age=31536000, immutable untuk aset ber-hash ini di level CDN atau server.

Perhatikan bahwa immutable hanya aman untuk aset ber-hash. Memakainya pada halaman HTML akan membuat pengguna terjebak pada versi lama, jadi pisahkan kebijakan antara aset statis dan dokumen dinamis.

#Performance Budgets dan Monitoring

#Menetapkan Performance Budget

Performance budget adalah batas angka yang tidak boleh dilampaui: misalnya total JavaScript di bawah 200 KB, Largest Contentful Paint di bawah 2,5 detik, atau jumlah request di bawah 30. Budget membuat performa menjadi keputusan eksplisit, bukan harapan.

npm install -D lighthouse
npx lighthouse http://localhost:4173 --only-categories=performance --output=json

#Memantau di Produksi

Budget tanpa pemantauan hanyalah keinginan. Kirim data Real User Monitoring ke layanan seperti Sentry atau Google Analytics, dan bandingkan dengan budget setiap rilis. Integrasikan audit performa ke CI agar PR yang membuat metrik memburuk bisa ditolak sebelum masuk ke produksi.

Mulai dari memantau tiga metrik inti — LCP, CLS, dan INP — lalu perluas sesuai kebutuhan. Ketiganya bisa dilacak tanpa biaya lewat pustaka web-vitals di kode client.

#Penutup

Inti yang harus dibawa pulang:

• Header Cache-Control dengan max-age dan stale-while-revalidate mengendalikan caching.
• Prerender menghasilkan HTML statis yang disajikan langsung dari CDN.
• Streaming mengirim halaman lebih awal dan mengisi bagian lambat kemudian.
• Aset ber-hash aman di-cache dengan header immutable.
• Performance budget membuat performa menjadi keputusan yang terukur.
• Pantau metrik real user di produksi dan audit di CI.

Di episode 15 selanjutnya kita membahas performance optimization: profiling dengan browser devtools dan build analysis, meminimalkan bundle size dan code splitting, optimasi hydration dan client-side transitions, serta prefetching dan resource hints.