Belajar Svelte - Deployment & Hosting

#Pendahuluan

Build yang sempurna belum berarti apa-apa sebelum berhasil berjalan di produksi. Deployment menghubungkan kode dengan pengguna: platform hosting, adapter yang tepat, dan konfigurasi caching menentukan pengalaman nyata.

Episode ini membahas pilihan deployment seperti Vercel, Netlify, Cloudflare Pages, dan static hosting, adapter SvelteKit dan serverless deployment, optimasi output produksi, serta caching dan integrasi CDN.

Setelah selesai, kalian bisa memilih platform yang tepat dan memahami apa yang terjadi antara command build dan halaman yang sampai ke pengguna.

Sepanjang episode ini, ingat bahwa deployment adalah konfigurasi yang bisa diulang, bukan ritual rahasia. Perubahan harus bisa dilacak di riwayat dan diputar ulang kapan saja.

#Deployment Options

#Platform Serverless vs Static

Pilihan platform bergantung pada kebutuhan aplikasi. Aplikasi dengan server-side rendering dan form actions butuh runtime server; aplikasi murni statis cukup di-host di CDN murah dan cepat. Vercel, Netlify, dan Cloudflare Pages menyediakan keduanya dengan pengalaman yang berbeda.

Platform serverless menangani scaling secara otomatis — tidak ada server yang perlu diurus. Namun perhatikan cold start: fungsi yang jarang dipanggil bisa menunda respons pertama.

#Pertimbangan Memilih

Perhatikan beberapa hal: kebutuhan fungsi server, lokasi region pengguna, batas gratis, dan integrasi dengan tooling yang sudah dipakai. Tidak ada jawaban universal — ukur sesuai beban kerja kalian.

Biaya juga harus masuk hitungan: platform serverless membebankan berdasarkan pemakaian, sedangkan VPS membebankan berdasarkan kapasitas. Aplikasi kecil dengan traffic rendah sering lebih murah di platform statis.

#SvelteKit Adapters dan Serverless Deployment

#Adapter Menentukan Target

Adapter adalah jembatan antara aplikasi SvelteKit dan platform hosting. adapter-vercel menghasilkan fungsi serverless untuk Vercel:

npm install -D @sveltejs/adapter-vercel

Setelah terpasang, ubah svelte.config.js agar memakai adapter tersebut.

Untuk hosting yang tidak didukung adapter khusus, adapter-node menyediakan server Node yang bisa dijalankan di VPS atau Docker. Ini pilihan paling fleksibel untuk infrastruktur sendiri.

#Contoh: Cloudflare Pages

Cloudflare Pages menggunakan adapter khusus karena menjalankan kode pada runtime Cloudflare Workers:

svelte.config.js untuk Cloudflare Pages

import adapter from "@sveltejs/adapter-cloudflare"
import { vitePreprocess } from "@sveltejs/vite-plugin-svelte"
 
const config = {
  preprocess: vitePreprocess(),
  kit: {
    adapter: adapter(),
  },
}
 
export default config

adapter-cloudflare menghasilkan aset statis plus fungsi worker untuk logika server. Platform lain memakai pola yang sama: ganti adapter, sesuaikan konfigurasi, dan bangun ulang.

#Build Output dan Optimasi Produksi

#Struktur Output Standar

SvelteKit menulis hasil build ke folder build. Isinya tergantung adapter: file statis untuk hosting statis, atau kombinasi fungsi server dan aset untuk platform serverless. Selalu periksa output build sebelum mengubah pengaturan.

Folder static disalin apa adanya ke output, sedangkan aset yang diimport melalui Vite mendapat hash. Ketahui perbedaannya saat mengatur pengiriman aset.

#Optimasi di Level Konfigurasi

Aktifkan opsi yang relevan: prerender untuk halaman statis agar tidak memakan runtime server, dan kompresi aset di level platform. Pengaturan Vite seperti target browser dan source map juga memengaruhi ukuran serta kecepatan output.

Jalankan build secara berkala di CI agar ukuran output terpantau. Regresi yang naik sekaligus lebih mudah ditangkap dibanding tersebar di banyak rilis.

#Caching dan Integrasi CDN

#Manfaat CDN

CDN mendekatkan aset ke pengguna dan menyerap beban berlebih. Aset yang di-hash oleh Vite — nama file berisi hash konten — bisa di-cache selamanya karena isinya tidak berubah. Halaman HTML tetap diberi cache pendek agar perubahan cepat dirilis.

Platform seperti Vercel dan Cloudflare sudah memakai CDN global secara default. Untuk infrastruktur sendiri, pertimbangkan CDN terpisah di depan server origin.

#Header Cache yang Disengaja

Setel header di platform hosting:

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

Nilai ini berlaku untuk file ber-hash. Halaman HTML dan API sebaiknya memakai cache pendek dengan revalidation. Strategi caching adalah keseimbangan antara kesegaran data dan kecepatan.

Uji konfigurasi cache di production dengan melihat header respons lewat DevTools. Header yang tidak muncul berarti aturannya belum sampai ke server yang melayani request.

#Penutup

Inti yang harus dibawa pulang:

• Pilih platform berdasarkan kebutuhan server-side atau statis.
• Adapter menentukan bentuk output dan runtime target.
• Ganti adapter di svelte.config.js dan bangun ulang saat pindah platform.
• Manfaatkan prerender untuk halaman yang tidak butuh server.
• Cache aset ber-hash dalam waktu lama, HTML dengan cache pendek.
• Gunakan CDN untuk mendekatkan aset ke pengguna.

Di episode 21 selanjutnya kalian akan belajar server-side rendering & SvelteKit — perbedaan SSG, SSR, dan hybrid rendering, load functions dan data server, islands architecture dan partial hydration, serta kapan memakai SSR versus SSG. Keputusan deploy di episode ini akan memengaruhi pilihan strategi rendering kalian.