Belajar SvelteKit - Konsep Dasar & Arsitektur Utama

#Pendahuluan

Di episode 1 kalian paham alasan SvelteKit ada. Sekarang waktunya membedah cara kerja di balik layar. Episode 2 membangun mental model tentang arsitektur SvelteKit: bagaimana satu direktori src/routes berubah menjadi aplikasi full-stack, bagaimana data mengalir dari server ke komponen, dan bagaimana build process bekerja.

Mental model ini adalah fondasi untuk semua episode selanjutnya. Kalau kalian paham peran setiap file dan alur data, debugging dan penyesuaian kode akan jauh lebih mudah. Mari kita bedah lapis demi lapis.

#Cara Kerja di Balik Layar

#Routing Berbasis Filesystem

Di SvelteKit, setiap file +page.svelte di dalam src/routes menjadi halaman yang URL-nya mengikuti posisi folder. Tidak ada konfigurasi routing terpisah; folder adalah struktur URL, file adalah konten.

src/routes/
|-- about/
|   |-- +page.svelte     -> /about
|-- blog/
|   |-- [slug]/
|   |   |-- +page.svelte -> /blog/apa-saja
|-- +page.svelte         -> /

Konvensi [slug] di nama folder menandakan dynamic segment: nilai di URL akan tersedia sebagai params.

#Load Functions dan Endpoint Lifecycle

Sebelum halaman di-render, SvelteKit menjalankan load functions. Di server, data yang diambil bisa dipakai untuk SSR; di client, hasilnya tersedia di komponen lewat prop data. Lifecycle-nya sederhana: cari file +page.server.js atau +page.js, jalankan load, kirim hasilnya ke +page.svelte.

#Build Process dengan Vite dan Adapter

SvelteKit dibangun di atas Vite. Saat npm run build, Vite meng-compile semua kode, SvelteKit menghitung route dan prerender, lalu adapter menyesuaikan output dengan platform tujuan. Adapter adalah satu-satunya bagian yang berbeda antar platform.

#Struktur Proyek SvelteKit

#Direktori Utama

Proyek SvelteKit standar punya beberapa bagian yang selalu ada:

• src/routes — semua halaman dan endpoint aplikasi.
• src/lib — kode bersama antar komponen, bisa di-import dengan alias $lib.
• src/routes/api — konvensi tempat menaruh endpoint API lewat file +server.js.
• static — aset mentah yang disalin apa adanya ke output.
• svelte.config.js — konfigurasi SvelteKit dan adapter.
• vite.config.js — konfigurasi Vite.

#Konvensi File dengan Awalan Plus

File yang diawali + punya peran khusus: +page.svelte untuk halaman, +layout.svelte untuk layout, +server.js untuk endpoint, dan +error.svelte untuk halaman error. File lain di dalam folder route tidak ikut ter-routing.

#Page Routing, Layouts, dan Nested Layouts

#Layout Default dan Nested Layouts

Layout membungkus halaman. src/routes/+layout.svelte berlaku untuk seluruh aplikasi, sedangkan src/routes/blog/+layout.svelte hanya untuk halaman di bawah /blog. Dengan cara ini, UI bersama seperti navbar bisa dipecah per bagian aplikasi.

<script>
    let { children } = $props();
</script>
 
<nav>Navbar bersama</nav>
{@render children()}

Prop children di layout di-render memakai {@render children()} untuk menampilkan konten halaman yang dibungkus.

#Layout Reset dan Route Groups

Jika beberapa route memakai layout berbeda dalam satu folder, pakai route groups dengan folder yang diawali kurung. Sementara layout reset (+layout@.svelte) mengabaikan layout induk dan memulai dari root, berguna untuk halaman seperti login yang tidak ingin memakai navbar.

#Server Load vs Client Load

#Server Load dengan +page.server.js

File +page.server.js berjalan di server: cocok untuk akses database, secret, dan redirect sebelum render. Data yang dikembalikan diserialisasi ke client.

Server load

export const load = async (event) => {
    const artikel = await ambilDariDatabase();
    return { artikel };
};

Di load versi server, kalian punya akses ke event.cookies, event.locals, dan event.fetch yang berjalan di server.

#Client Load dengan +page.js

File +page.js (tanpa .server) berjalan di client setelah JavaScript dimuat, dan juga di server saat SSR. Gunakan ini ketika data tidak sensitif dan kalian ingin navigasi berikutnya terasa instan.

#Kapan Memakai yang Mana

Aturan praktisnya: kalau data butuh secret, database, atau redirect berbasis session, pakai +page.server.js. Kalau data publik dan ingin cached di client, pakai +page.js.

#Middleware, Hooks, dan Runtime Configuration

#hooks.server.js sebagai Middleware

Hooks adalah fungsi global yang menyelip di setiap request. Yang paling sering dipakai adalah handle, yang berjalan sebelum route diproses — tempat ideal untuk authentication dan modifikasi event.locals.

hooks.server.js minimal

export const handle = async ({ event, resolve }) => {
    return await resolve(event);
};

Fungsi handle menerima event dan resolve; resolve(event) melanjutkan request ke route yang dituju. Tanpa memanggilnya, tidak ada halaman yang di-render.

#Runtime Configuration

Konfigurasi runtime seperti mode SSR, prerender, dan adapter diatur di svelte.config.js dan per-route lewat ekspor seperti export const prerender = true. Kombinasi keduanya memberi kontrol penuh tanpa meninggalkan satu file konfigurasi yang masif.

#Penutup

Inti yang harus dibawa pulang:

• Routing SvelteKit berbasis filesystem: folder di src/routes menentukan URL.
• File berawalan + punya peran khusus; file biasa di folder route tidak di-routing.
• Load functions menyuplai data ke halaman; +page.server.js berjalan di server, +page.js di client.
• Vite meng-compile kode dan adapter menyesuaikan output dengan platform deployment.
• Nested layouts membungkus halaman per bagian; route groups dan layout reset memberi fleksibilitas.
• Hooks seperti handle adalah middleware global untuk setiap request.

Di episode 3 selanjutnya kita akan memulai proyek SvelteKit — membuat aplikasi pertama dengan npm create svelte@latest, mengenal struktur folder dan konfigurasi awal, menjalankan dev server dengan hot module replacement, serta menyiapkan TypeScript, ESLint, dan Prettier.