Belajar SvelteKit - Sejarah, Latar Belakang & Mengapa Membutuhkan SvelteKit

#Pendahuluan

Sebelum memahami cara pakai SvelteKit, penting untuk tahu dari mana dia berasal dan masalah apa yang dia selesaikan. Episode 1 menempatkan SvelteKit pada peta sejarah: dari kelahiran Svelte sebagai compiler, evolusi menjadi meta-framework, sampai posisinya di tengah ekosistem framework JavaScript.

Dengan memahami latar belakang, kalian tidak hanya menghafal API, tapi juga tahu kapan memilih SvelteKit dibanding alternatif lain. Keputusan arsitektur yang tepat biasanya berangkat dari pemahaman sejarah dan filosofi, bukan sekadar tren.

Episode ini juga menyentuh filosofi desain yang konsisten sampai sekarang: developer experience yang baik tanpa mengorbankan performa akhir. Kalian akan melihat bagaimana setiap keputusan arsitektur di SvelteKit berakar pada dua prinsip tersebut.

#Sejarah dan Evolusi SvelteKit

#Svelte: Compiler, Bukan Framework Runtime

Svelte diciptakan oleh Rich Harris pada tahun 2016 sebagai respon atas kelelahan terhadap virtual DOM. Ide intinya radikal: jalankan pekerjaan berat saat build time, bukan saat aplikasi berjalan di browser. Kode di dalam file .svelte di-compile menjadi JavaScript murni yang imperatif.

<script>
    let nama = $state("Svelte");
</script>
 
<h1>Halo, {nama}!</h1>

Hasilnya: bundle kecil, tanpa runtime framework di client, dan update DOM yang langsung menargetkan elemen yang berubah. Inilah cikal bakal filosofi yang nanti menular ke SvelteKit.

Pendekatan compile-time ini juga berarti Svelte tidak membawa runtime yang diunduh sekali lalu dieksekusi di browser. Sebagian besar kerja justru dilakukan pada mesin pengembang, sehingga aplikasi akhir lebih ramping dan hemat daya pada perangkat rendah.

#Dari Sapper ke SvelteKit

Setelah Svelte populer, Rich Harris membangun Sapper pada 2017 sebagai coba-coba meta-framework: routing, SSR, dan preloading. Pengalaman itu kemudian ditulis ulang menjadi SvelteKit yang resmi masuk beta pada 2021, mencapai stable 1.0 pada Desember 2022, dan melanjutkan ke SvelteKit 2 pada September 2023. Setiap lompatan memperbaiki API dan menyesuaikan diri dengan Vite.

Versi 2 membawa perubahan yang lebih kecil dibanding lompatan dari Sapper, tetapi menegaskan arah: fokus pada stabilitas, integrasi Vite yang rapat, dan dukungan penuh terhadap runes Svelte 5 sebagai model reaktivitas baru.

npm view @sveltejs/kit version

Perintah npm view @sveltejs/kit version menampilkan versi stable SvelteKit terbaru di registry npm. Sebagai konteks, semua episode series ini ditulis terhadap rilis SvelteKit 2 dengan Svelte 5.

#Masalah yang Diselesaikan SvelteKit

#All-in-One untuk Routing, Data Fetching, dan Deployment

Svelte murni hanya menyediakan UI. Untuk aplikasi nyata kalian tetap butuh routing, data fetching di server, dan cara men-deploy hasilnya. SvelteKit mengemas semua itu dalam satu package yang konsisten:

• Routing berbasis filesystem di direktori src/routes.
• Data loading lewat load functions yang berjalan di server.
• Server actions untuk memproses form tanpa membuat API terpisah.
• Hooks dan middleware untuk menyisipkan logika di setiap request.
• Adapters untuk men-deploy ke Vercel, Netlify, Cloudflare, Node, atau static.

#Simplifikasi SSR, SSG, dan Hybrid Rendering

Sebelum SvelteKit, memilih mode rendering terasa seperti komitmen sekali jalan. SvelteKit membuatnya per-rute: sebuah halaman bisa di-prerender sebagai HTML statis, di-SSR dinamis, atau di-streaming, cukup dengan mengubah satu baris konfigurasi.

Mode rendering per halaman

export const prerender = true;

Baris export const prerender = true di +page.js memberitahu SvelteKit bahwa halaman ini boleh di-generate sebagai HTML statis saat build.

#Fullstack Tanpa Boilerplate yang Berat

Banyak framework memaksa struktur folder dan abstraksi yang membingungkan. SvelteKit memilih konvensi minimal: folder src/routes untuk halaman, src/lib untuk kode bersama, dan satu file svelte.config.js. Kode server dan client hidup berdampingan secara jelas tanpa memakai banyak folder abstraksi.

Struktur ini menjadikan SvelteKit mudah didekati bagi pemula sekaligus cukup kuat untuk proyek besar. Folder yang sedikit berarti lebih sedikit yang harus dihafal, dan konvensi yang jelas berarti lebih sedikit diskusi di dalam tim.

#Perbandingan dengan Pendekatan Tradisional

#SvelteKit vs Svelte Murni

Svelte murni adalah UI framework. Kalian tetap harus menyusun sendiri routing, data fetching, dan SSR. SvelteKit adalah lapisan di atasnya yang menyediakan server, routing, dan build pipeline. Aturan praktisnya: pakai Svelte untuk komponen dan widget; pakai SvelteKit untuk aplikasi web lengkap. Pemisahan ini penting dipahami karena banyak tutorial mencampur keduanya, padahal keduanya menyelesaikan masalah pada lapisan yang berbeda.

#SvelteKit vs Framework Lain

Dibanding Next.js atau Nuxt, SvelteKit unggul di ukuran bundle dan model reactivity yang berjalan di compile time. Kekurangannya, ekosistem komponen dan plugin lebih kecil dibanding React. Keputusan memilih framework biasanya bergantung pada kebutuhan tim, kenyamanan tim, dan ukuran komunitas.

Kunci perbandingan bukan siapa yang tercepat di benchmark, melainkan siapa yang paling cocok dengan cara kerja tim. Framework yang bagus membuat tim produktif di minggu pertama, bukan hanya di atas kertas.

#Kapan dan Mengapa Memilih SvelteKit

#Profil Proyek yang Cocok

SvelteKit paling cocok untuk aplikasi yang butuh performa tinggi di client, SSR untuk SEO, dan alur development yang cepat. Blog, dashboard internal, toko online, dan aplikasi full-stack kecil sampai menengah adalah contoh yang pas. Untuk aplikasi yang JavaScript-nya harus diminimalkan, seperti landing page dengan interaksi terbatas atau aplikasi yang diakses dari jaringan lambat, keunggulan bundle kecil SvelteKit sangat terasa.

#Profil Proyek yang Kurang Cocok

Jika tim sudah sangat kuat di React dan butuh ekosistem library yang luas, atau jika aplikasi kalian bergantung pada plugin Vite yang sangat spesifik, pertimbangkan ulang. Sebaliknya, proyek yang menjunjung bundle kecil dan keterbacaan kode akan sangat diuntungkan.

Gunakan kriteria yang sama saat mengevaluasi rilis baru SvelteKit: apakah pembaruan tersebut menyelesaikan masalah nyata di tim kalian? Menjawab pertanyaan ini dengan jujur menjaga kode tetap sehat dalam jangka panjang.

#Penutup

Inti yang harus dibawa pulang:

• Svelte adalah compiler-based UI framework yang lahir tahun 2016 untuk menghindari virtual DOM.
• SvelteKit berevolusi dari Sapper menjadi meta-framework full-stack dan stabil sejak 2022.
• SvelteKit menyatukan routing, data fetching, dan deployment dalam satu konvensi sederhana.
• Mode SSR, SSG, dan streaming bisa diatur per halaman, bukan per aplikasi.
• Svelte murni untuk komponen; SvelteKit untuk aplikasi lengkap.
• Pilih framework berdasarkan kebutuhan tim dan proyek, bukan sekadar tren.
• SvelteKit dibangun di atas Vite, sehingga seluruh tooling development terasa modern dan cepat.
• Ikuti changelog resmi agar transisi ke rilis baru berjalan mulus.

Di episode 2 selanjutnya kita akan membahas konsep dasar dan arsitektur utama — cara kerja di balik layar: filesystem routing, load functions, server routes, build process dengan Vite dan adapter, struktur proyek, nested layouts, server load versus client load, serta peran hooks dan runtime configuration.