Layouting di SvelteKit

Dalam SvelteKit, layout adalah komponen Svelte yang membungkus halaman-halaman. Ini sangat berguna untuk elemen UI yang dipakai berulang kali seperti header, footer, atau sidebar.

Konsep utamanya adalah memisahkan kerangka (layout) dari konten halaman (page).

+page.svelte vs +layout.svelte

Cara kerja dan cakupannya berbeda:

• +page.svelte: Komponen ini adalah halaman itu sendiri. Kodenya hanya akan berjalan dan tampil untuk route spesifik di mana ia berada.

  • Contoh: src/routes/about/+page.svelte hanya akan aktif saat kita membuka URL /about.

• +layout.svelte: Komponen ini berfungsi sebagai pembungkus. Kodenya akan berjalan untuk route di mana ia berada dan juga semua routes turunan di dalamnya.

  • Contoh: src/routes/blog/+layout.svelte akan aktif saat kita membuka /blog, /blog/artikel, /blog/aktivitas, /blog/aktivitas/uwu, dan seterusnya.

Snippet children

Di Svelte versi 5, setiap file +layout.svelte menerima konten halaman atau layout turunannya melalui sebuah snippet khusus yang disebut children (snippet ini didapat dari $props()). Untuk merendernya, kita menggunakan sintaks {@render children()}. Ini adalah pengganti tag <slot /> dari versi Svelte sebelumnya (Sebelum Svelte 5).

<!-- src/routes/blog/+layout.svelte -->
<script>
    let { children } = $props()
<script>

<nav>
	<a href="/blog">Beranda Blog</a>
	<a href="/blog/artikel">Artikel</a>
	<a href="/blog/aktivitas">Aktivitas</a>
</nav>

<main>
	<!-- Konten dari /blog/+page.svelte atau /blog/artikel/+page.svelte akan muncul di sini -->
	{@render children()}
</main>

<footer>
	<p>Hak Cipta © Blog Saya</p>
</footer>

Hirarki Layout (Nested Layouts)

SvelteKit memungkinkan layout untuk bersarang (nesting). Ini berarti sebuah layout bisa dibungkus oleh layout lain yang berada di level direktori yang lebih tinggi.

Visualisasinya seperti pada diagram berikut:

Mari kita bedah diagram di atas:

1. app.html: Ini adalah “cangkang” terluar dari aplikasi SvelteKit kita.
2. Root Layout (src/routes/+layout.svelte): Ini adalah layout teratas yang membungkus semua halaman dalam aplikasi kita.
3. Halaman About (src/routes/about/+page.svelte): Halaman /about langsung dibungkus oleh Root Layout (Mengingat tidak adanya +layout.svelte lagi selain cuma satu yaitu Root Layout).
4. Layout Bersarang:
   • Route /blog memiliki +layout.svelte-nya sendiri (/blog Layout). Layout ini akan dibungkus oleh Root Layout.
   • Halaman /blog, /blog/artikel, dan /blog/aktivitas akan dibungkus oleh /blog Layout.
   • Simpelnya, routes /blog beserta turunannya yaitu /blog/artikel dan /blog/aktivitas akan dibungkus oleh dua layout yaitu Blog Layout dan Root Layout.

Struktur File

src/
│   app.html                # Pembungkus semuanya
└── routes/
    ├── +layout.svelte      # Root Layout (Pembungkus semuanya, tapi tetap masih merupakan children dari 'app.html')
    ├── +page.svelte        # Halaman utama (/)
    │
    ├── about/
    │   └── +page.svelte    # Halaman /about
    │
    └── blog/
        ├── +layout.svelte  # Layout khusus untuk /blog dan turunannya
        ├── +page.svelte    # Halaman /blog
        │
        ├── artikel/
        │   └── +page.svelte # Halaman /blog/artikel
        │
        └── aktivitas/
            └── +page.svelte # Halaman /blog/aktivitas

Dengan struktur ini:

• Saat membuka /about, komponen yang aktif adalah src/routes/+layout.svelte dan src/routes/about/+page.svelte.
• Saat membuka /blog/artikel, komponen yang aktif adalah src/routes/+layout.svelte, src/routes/blog/+layout.svelte, dan src/routes/blog/artikel/+page.svelte.

Kesimpulannya, Layout memberikan cara yang sangat powerful untuk mengelola struktur dan kode yang berulang di aplikasi SvelteKit kita.