Jika Anda telah menghabiskan beberapa tahun terakhir berpindah-pindah antar meta-framework, SvelteKit 2 akan terasa seperti campuran antara rasa lega dan kecurigaan. Lega, karena ia benar-benar menghilangkan kompleksitas alih-alih menambahkannya. Curiga, karena Anda terus menunggu masalah muncul. Namun, hal itu tidak pernah terjadi. Dipadukan dengan Svelte 5, stack ini adalah salah satu cara paling produktif untuk merilis aplikasi full-stack pada tahun 2026, dan angka-angkanya mendukung pengalaman pengembang tersebut. Ukuran bundle keluar sekitar 35% lebih kecil dibandingkan hasil Svelte 4. Routing, fungsi server, dan pola autentikasi semuanya adalah fitur utama yang didukung penuh, bukan sekadar plugin yang disambung-sambungkan secara paksa.

Runes membuat reaktivitas menjadi eksplisit

Perubahan pola pikir terbesar datang dari runes pada Svelte 5. Versi Svelte sebelumnya menggunakan label $: dan banyak "sihir" compiler untuk melacak dependensi. Itu berhasil, tetapi ketika terjadi kesalahan, Anda seperti sedang memperbaiki kabel-kabel yang tidak terlihat. Runes menggantikan sihir tersebut dengan fungsi yang eksplisit. Anda memberi tahu compiler dengan tepat apa yang harus dilacak, dan ia akan mendengarkannya.

Berikut adalah hal-hal yang perlu Anda ketahui.

  • $state menangani variabel reaktif. Bungkus nilai apa pun dalam $state() dan compiler akan tahu untuk mengawasinya.
  • $derived menghitung nilai dari state lain. Perlu daftar yang terfilter atau total yang terformat? Gunakan $derived. Perbedaan utamanya dengan $effect adalah $derived digunakan untuk nilai, bukan tindakan (actions).
  • $effect menjalankan side effect. Pikirkan tentang pembaruan judul dokumen, pengukuran DOM secara manual, atau timer yang membutuhkan pembersihan (cleanup). Ia berjalan setelah DOM melakukan commit, mirip dengan lifecycle hook tetapi terikat pada dependensi reaktif tertentu.
  • $props menggantikan pola export let yang lama untuk menerima data dalam komponen. Ini lebih jelas, dan berinteraksi lebih baik dengan TypeScript.

Model ini membuahkan hasil dalam praktiknya. Karena compiler hanya melacak apa yang Anda tandai, kode mati (dead code) akan tetap menjadi kode mati. Anda tidak lagi bertanya-tanya mengapa sebuah variabel memicu pembaruan, dan Anda mulai mempercayai instruksi eksplisit Anda sendiri.

Routing berdasarkan folder, bukan konfigurasi

SvelteKit menggunakan sistem berkas Anda untuk routing. Tidak ada file router terpisah yang perlu dikelola. Masukkan file +page.svelte ke dalam sebuah direktori, dan direktori tersebut akan menjadi rute aktif.

UI bersama membungkus rute-rute tersebut melalui +layout.svelte. Letakkan satu di root Anda, dan setiap rute anak akan mewarisinya. Letakkan satu lebih dalam di dalam pohon direktori, dan hanya bagian itu saja yang mendapatkan pembungkusnya.

Logika sisi server berada di +page.server.ts. Ini berjalan sebelum halaman Anda dirender, sehingga di sinilah tempat Anda melakukan query ke database, memvalidasi cookie, atau menolak pengguna yang tidak terautentikasi. Tipe data mengalir secara otomatis dari fungsi load Anda ke dalam komponen halaman, yang berarti data Anda sudah bertipe (typed) tanpa perlu menulis interface secara manual.

Endpoint API mentah ditempatkan di file +server.ts. File ini mengekspor handler HTTP standar—GET, POST, PUT, DELETE—sehingga membangun back end REST di samping halaman-halaman Anda terasa sangat alami.

Satu fitur yang sering diremehkan: pengelompokan rute (group routes). Dengan membungkus nama folder dalam tanda kurung, seperti (auth), Anda membuat layout bersama tanpa menambahkan segmen ke URL. Ini sangat cocok untuk halaman login dan signup yang membutuhkan kerangka UI minimalis yang sama tetapi berada di /login dan /signup, bukan /auth/login.

Data, keamanan, dan progressive enhancement

Framework modern senang berbicara tentang full-stack, tetapi banyak yang membuat Anda menebak-nebak di mana harus menempatkan pemeriksaan autentikasi atau logika form. SvelteKit memberi Anda hook yang jelas.

Gunakan +page.server.ts untuk pengambilan data (data fetching). Fungsi load di sana berjalan secara eksklusif di server, sehingga kredensial database Anda tidak akan pernah bocor ke browser. SvelteKit menghasilkan tipe data dari nilai kembalian load Anda, sehingga frontend Anda tetap akurat.

Gunakan hooks.server.ts untuk mengamankan seluruh aplikasi. Ini berjalan pada setiap permintaan, menjadikannya tempat yang tepat untuk memverifikasi sesi, memeriksa masa berlaku JWT, atau melampirkan konteks pengguna ke event yang masuk.

Untuk mutasi, gunakan form actions. Alih-alih menghubungkan endpoint API terpisah dan menangani JSON, Anda mendefinisikan sebuah action di dalam +page.server.ts. Keindahannya di sini adalah progressive enhancement. Jika JavaScript gagal dimuat—atau jika pengguna menonaktifkannya—form tetap akan mengirimkan data ke server action dan halaman akan merender ulang dengan hasilnya. Jika JavaScript tersedia, SvelteKit akan meningkatkan pengalaman tersebut tanpa perlu reload penuh. Anda mendapatkan ketahanan dan kerapihan dari kode yang sama.

Satu aturan yang perlu diingat: lakukan perhitungan Anda di $derived, bukan di $effect. Menggunakan $effect untuk menghitung nilai dapat memicu loop pembaruan yang sulit dilacak. Simpan $effect untuk side effect yang sebenarnya, dan biarkan $derived mengelola state terhitung Anda.

SvelteKit versus Next.js

Both frameworks can ship production applications, but the trade-offs are real.

Bundle size favors SvelteKit. Because Svelte compiles components to vanilla JavaScript and skips the Virtual DOM entirely, the runtime footprint stays small. Next.js carries React’s reconciliation engine with it.

Reactivity also differs. SvelteKit resolves runes at compile time. The browser receives plain updates. Next.js relies on React’s runtime hooks and reconciliation, which means more work happens on the client.

Onboarding is gentler with SvelteKit. The mental model is smaller. You are not juggling useEffect dependency arrays or memoization puzzles to avoid re-renders. TypeScript integration deserves a mention too. While both frameworks