## Kenapa SvelteKit? SvelteKit adalah meta-framework untuk Svelte, sama seperti Next.js untuk React atau Nuxt untuk Vue. Tapi SvelteKit punya pendekatan yang berbeda. Karena Svelte adalah compiler (bukan virtual DOM framework), bundle yang dihasilkan jauh lebih kecil dan performance runtime lebih baik. Beberapa hal yang membuat SvelteKit menarik: - **File-based routing** tanpa konfigurasi tambahan - **SSR, SSG, dan SPA** dalam satu framework - **TypeScript support** tanpa setup rumit - **Form actions** untuk menangani form submission tanpa JavaScript di sisi client - **Svelte 5 runes** untuk reaktivitas yang lebih eksplisit dan mudah dipahami - **Zero-config deployment** ke Vercel, Netlify, Cloudflare, dan platform lain ## Memulai Proyek Baru Jalankan perintah berikut untuk membuat proyek SvelteKit baru: ```bash npx sv create my-app cd my-app npm install npm run dev ``` SvelteKit versi terbaru menggunakan `sv` CLI (sebelumnya `npm create svelte`). CLI ini akan menanyakan beberapa hal seperti template (minimal, demo, library), TypeScript (yes/no), dan tools tambahan (ESLint, Prettier, Vitest, Playwright). Struktur folder setelah proyek dibuat: ``` my-app/ src/ routes/ +layout.svelte +page.svelte app.html app.css static/ favicon.png svelte.config.js package.json ``` Folder `src/routes/` adalah jantung dari SvelteKit. Setiap file di dalam folder ini otomatis menjadi route. ## File-Based Routing Routing di SvelteKit berdasarkan struktur folder. Setiap folder di dalam `src/routes/` menjadi satu route, dan file dengan prefix `+` mendefinisikan perilaku route tersebut. ### Konvensi Penamaan File | File | Fungsi | |------|--------| | `+page.svelte` | Komponen UI untuk halaman | | `+page.ts` | Load function (client-side) | | `+page.server.ts` | Load function + form actions (server-side) | | `+layout.svelte` | Komponen UI untuk layout (membungkus child routes) | | `+layout.ts` | Load function untuk layout | | `+layout.server.ts` | Load function server-side untuk layout | | `+error.svelte` | Halaman error custom | | `+server.ts` | API endpoint (REST) | ### Contoh Struktur Route ``` src/routes/ +layout.svelte # Layout global (navbar, footer) +layout.server.ts # Load data global (user session, dll.) +page.svelte # Halaman / (home) about/ +page.svelte # Halaman /about blog/ +page.svelte # Halaman /blog (daftar artikel) +page.server.ts # Load data dari server [slug]/ +page.svelte # Halaman /blog/:slug (detail artikel) +page.server.ts # Load artikel + form action untuk komentar api/ users/ +server.ts # GET/POST /api/users ``` Sintaks `[slug]` adalah **dynamic parameter**. Nilai slug bisa diakses melalui `$page.params.slug` atau di load function. ### Nested Layout SvelteKit mendukung layout bersarang. Setiap folder bisa punya `+layout.svelte` sendiri yang membungkus semua route di dalamnya, sambil tetap berada di dalam layout parent. ``` src/routes/ +layout.svelte # Layout terluar (seluruh aplikasi) dashboard/ +layout.svelte # Layout khusus dashboard (sidebar, dll.) +page.svelte # /dashboard settings/ +page.svelte # /dashboard/settings ``` Untuk reset layout (break out dari parent layout), gunakan grup dengan nama `(group)`: ``` src/routes/ +layout.svelte (app)/ +layout.svelte # Layout untuk aplikasi (dengan navbar) dashboard/+page.svelte (marketing)/ +layout.svelte # Layout untuk halaman marketing (tanpa navbar) +page.svelte # Halaman landing ``` Grup tidak mempengaruhi URL. `(app)/dashboard` tetap menghasilkan URL `/dashboard`. ## Load Functions Load function digunakan untuk mengambil data sebelum halaman dirender. Bisa berjalan di server (`+page.server.ts`) atau di client (`+page.ts`). ### Server-Side Load ```typescript // src/routes/blog/+page.server.ts import type { PageServerLoad } from "./$types"; import { db } from "$lib/server/database"; export const load: PageServerLoad = async ({ url }) => { const page = Number(url.searchParams.get("page") || "1"); const limit = 10; const [posts, total] = await Promise.all([ db.post.findMany({ skip: (page - 1) * limit, take: limit, orderBy: { createdAt: "desc" }, include: { author: true }, }), db.post.count(), ]); return { posts, pagination: { page, limit, total, totalPages: Math.ceil(total / limit), }, }; }; ``` Data yang di-return dari load function otomatis tersedia sebagai prop `data` di komponen Svelte: ```svelte

Blog

{post.title} oleh {post.author.name}

{#if data.pagination.totalPages > 1}

{#if data.pagination.page > 1} Sebelumnya {/if} Halaman {data.pagination.page} dari {data.pagination.totalPages} {#if data.pagination.page < data.pagination.totalPages} Berikutnya {/if}

{/if} ``` ### Universal Load (Client-Side) Load function di `+page.ts` berjalan di browser selama navigasi client-side, dan di server saat render awal. Cocok untuk data yang sering berubah dan tidak butuh akses ke secrets: ```typescript // src/routes/weather/[city]/+page.ts import type { PageLoad } from "./$types"; export const load: PageLoad = async ({ params }) => { const res = await fetch(`https://api.weatherapi.com/v1/current.json?key=${import.meta.env.VITE_WEATHER_API_KEY}&q=${params.city}`); const data = await res.json(); return { city: params.city, temperature: data.current.temp_c, condition: data.current.condition.text, }; }; ``` ## Form Actions Form actions adalah cara SvelteKit menangani form submission. Pendekatan ini bekerja tanpa JavaScript (progressive enhancement) dan otomatis terintegrasi dengan load functions. ```typescript // src/routes/contact/+page.server.ts import type { Actions, PageServerLoad } from "./$types"; import { fail, error, redirect } from "@sveltejs/kit"; import { sendEmail } from "$lib/server/email"; export const load: PageServerLoad = async ({ locals }) => { return { user: locals.user, }; }; export const actions: Actions = { // Action default (form tanpa atribut action spesifik) default: async ({ request }) => { const formData = await request.formData(); const name = formData.get("name")?.toString().trim(); const email = formData.get("email")?.toString().trim(); const message = formData.get("message")?.toString().trim(); // Validasi const errors: Record = {}; if (!name || name.length < 2) errors.name = "Nama minimal 2 karakter."; if (!email || !email.includes("@")) errors.email = "Email tidak valid."; if (!message || message.length < 10) errors.message = "Pesan minimal 10 karakter."; if (Object.keys(errors).length > 0) { // fail() mengembalikan data tanpa mengubah status code (tetap 200) // tapi form prop `form` akan berisi data error return fail(400, { errors, name, email, message }); } try { await sendEmail({ to: "support@contoh.com", from: email, name, body: message }); } catch (err) { return fail(500, { errors: { server: "Gagal mengirim email. Coba lagi." }, name, email, message }); } // Redirect setelah sukses throw redirect(303, "/contact/success"); }, // Named action: gunakan dengan action="?/subscribe" subscribe: async ({ request }) => { const formData = await request.formData(); const email = formData.get("email")?.toString().trim(); if (!email || !email.includes("@")) { return fail(400, { errors: { email: "Email tidak valid." } }); } // Simpan subscriber ke database // await db.subscriber.create({ data: { email } }); return { success: true, message: "Berhasil berlangganan newsletter!" }; }, }; ``` Komponen Svelte untuk form: ```svelte

Hubungi Kami

``` Directive `use:enhance` dari `$app/forms` membuat form submission berjalan via JavaScript (AJAX) tanpa full page reload, tapi tetap berfungsi normal tanpa JavaScript. Ini adalah progressive enhancement yang elegan. ## SSR, SSG, dan SPA SvelteKit mendukung tiga mode rendering yang bisa dikonfigurasi per-halaman. ### Server-Side Rendering (SSR) SSR adalah default di SvelteKit. Halaman dirender di server saat setiap request. Cocok untuk konten dinamis dan SEO. ```typescript // src/routes/+page.ts export const ssr = true; // default, opsional untuk ditulis ``` ### Static Site Generation (SSG) Untuk halaman yang kontennya jarang berubah, gunakan prerender. SvelteKit akan generate HTML statis saat build time. ```typescript // src/routes/about/+page.ts export const prerender = true; ``` Atau untuk seluruh aplikasi, di root layout: ```typescript // src/routes/+layout.ts export const prerender = true; export const ssr = true; export const trailingSlash = "always"; ``` ### Client-Side Only (SPA) Untuk halaman yang tidak butuh SSR (misalnya dashboard privat), matikan SSR: ```typescript // src/routes/dashboard/+page.ts export const ssr = false; ``` Atau untuk seluruh aplikasi sebagai SPA murni: ```typescript // src/routes/+layout.ts export const ssr = false; export const prerender = false; ``` ### Hybrid Rendering Kamu bisa mencampur mode rendering dalam satu aplikasi. Misalnya, halaman blog di-prerender (statis), halaman dashboard jadi SPA, dan halaman lain SSR: ```typescript // src/routes/blog/[slug]/+page.ts export const prerender = true; // src/routes/dashboard/+page.ts export const ssr = false; // src/routes/search/+page.ts // Tidak perlu konfigurasi, default SSR aktif ``` ## Svelte 5 Runes Svelte 5 memperkenalkan **runes**, cara baru untuk reaktivitas yang menggantikan sintaks lama (`let`, `$:`, `export let`). Runes membuat reaktivitas lebih eksplisit, lebih mudah di-debug, dan lebih kompatibel dengan TypeScript. Ada beberapa runes utama: `$state`, `$derived`, `$effect`, `$props`, dan `$bindable`. ### `$state` - State Reaktif ```svelte

Halo, {name || "Anonymous"}!

{user.name} suka: {user.hobbies.join(", ")}

``` Perhatikan bahwa array push pada `user.hobbies` langsung reaktif di Svelte 5. Tidak perlu reassignment atau trik khusus seperti di React. ### `$derived` - Computed Values ```svelte

Harga: Jumlah: Diskon (%):

Subtotal	Rp{subtotal.toLocaleString("id-ID")}
Diskon	- Rp{discountAmount.toLocaleString("id-ID")}
Total	Rp{total.toLocaleString("id-ID")}

{summary}

``` `$derived` menggantikan reactive statement `$:` dari Svelte 4. Nilai derived dihitung ulang hanya ketika dependency berubah, mirip dengan `useMemo` di React tapi tanpa dependency array manual. ### `$effect` - Side Effects ```svelte ``` `$effect` menggantikan `onMount`, `afterUpdate`, dan reactive statement `$:` yang punya side effects. Penting untuk tidak menggunakan `$effect` untuk mengubah state yang menjadi dependency-nya (bisa menyebabkan infinite loop). ### `$props` - Component Props ```svelte

{#if featured} Featured {/if}

{title}

{excerpt}

{author.name} {publishedAt.toLocaleDateString("id-ID", { dateStyle: "long" })}

{#if tags.length > 0}

{#each tags as tag} #{tag} {/each}

{/if}

``` Penggunaan komponen: ```svelte {#each posts as post} {/each} ``` ### `$bindable` - Two-Way Binding Props ```svelte {#if open}

(open = false)}>

{/if} ``` Penggunaan: ```svelte

Apakah kamu yakin?

``` ## Snippets (Pengganti Slots) Svelte 5 memperkenalkan **snippets** sebagai pengganti slots. Snippet adalah blok markup yang bisa dirender di tempat lain, mirip dengan render props di React. ```svelte {#if items.length === 0} {@render emptyState?.()} {:else}

{@render itemTemplate?.(item, i)}

{/if} ``` Penggunaan dengan snippet: ```svelte {#snippet itemTemplate(product, index)}

{product.name} - Rp{product.price.toLocaleString("id-ID")} (#{index + 1})

{/snippet} {#snippet emptyState()}

Tidak ada produk.

{/snippet} ``` ## API Routes SvelteKit bisa juga dipakai sebagai backend API melalui `+server.ts` files: ```typescript // src/routes/api/users/+server.ts import { json, error } from "@sveltejs/kit"; import type { RequestHandler } from "./$types"; export const GET: RequestHandler = async ({ url, locals }) => { if (!locals.user) { throw error(401, "Unauthorized"); } const search = url.searchParams.get("search") || ""; const users = await db.user.findMany({ where: { name: { contains: search, mode: "insensitive" } }, select: { id: true, name: true, email: true }, }); return json({ users }); }; export const POST: RequestHandler = async ({ request, locals }) => { if (!locals.user || locals.user.role !== "admin") { throw error(403, "Forbidden"); } const body = await request.json(); // Validasi if (!body.name || !body.email) { throw error(400, "Name and email are required"); } const user = await db.user.create({ data: { name: body.name, email: body.email }, }); return json({ user }, { status: 201 }); }; ``` ## Kesimpulan SvelteKit adalah framework yang sangat produktif untuk membangun aplikasi web. Kombinasi file-based routing yang intuitif, load functions untuk data fetching, form actions yang mendukung progressive enhancement, dan fleksibilitas rendering (SSR/SSG/SPA) membuatnya cocok untuk berbagai jenis aplikasi. Dengan Svelte 5 runes, reaktivitas menjadi lebih jelas dan type-safe. `$state` untuk state, `$derived` untuk computed values, `$effect` untuk side effects, dan `$props` untuk component props menggantikan sintaks lama dengan sesuatu yang lebih konsisten dan mudah dipahami. Kalau kamu mencari framework yang menggabungkan developer experience yang baik, performance yang tinggi, dan bundle size yang kecil, SvelteKit layak untuk dipertimbangkan.