app.html: Template Induk Aplikasi SvelteKit

Di SvelteKit, app.html adalah kerangka dasar atau “blueprint” untuk semua halaman di aplikasi web. Anggap saja ini sebagai “cangkang” HTML statis di mana semua komponen Svelte yang dinamis akan ditampilkan.

File ini berada di src/app.html dan umumnya terlihat seperti ini:

<!doctype html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		%sveltekit.head%
	</head>
	<body data-sveltekit-preload-data="hover">
		<div style="display: contents">%sveltekit.body%</div>
	</body>
</html>

Placeholder Penting

  1. %sveltekit.head% SvelteKit akan secara otomatis memasukkan semua isi dari tag <svelte:head> untuk setiap halaman.

    Note: Kalau kita baru buat project SvelteKit, biasanya akan sudah dicontohkan cara penggunaannya di src/routes/+layout.svelte

  2. %sveltekit.body% Ini adalah placeholder utama. Di sinilah konten dari file-file .svelte (seperti +page.svelte dan +layout.svelte) akan disisipkan ke %sveltekit.body% oleh SvelteKit.

Contoh Intuitif Cara Kerjanya

Untuk memahami bagaimana proses “injeksi” konten ini terjadi, mari lihat contoh berikut.

Misalkan ada sebuah file halaman di src/routes/+page.svelte dengan konten sederhana:

<!-- src/routes/+page.svelte -->
<h1>Halaman Utama</h1>
<p>Selamat datang di website ini.</p>

Ketika seorang pengguna mengakses halaman utama (/) melalui browser, SvelteKit akan mengambil konten dari +page.svelte di atas dan menyisipkannya ke dalam placeholder %sveltekit.body% di app.html.

Hasil akhir yang diterima oleh browser akan terlihat seperti ini:

<!-- Hasil render di Browser -->
<!doctype html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		<!-- %sveltekit.head% diisi oleh SvelteKit -->
		<title>Judul Halaman</title>
		<style>/* CSS dari komponen Svelte */</style>
	</head>
	<body data-sveltekit-preload-data="hover">
		<div style="display: contents">
			<!-- %sveltekit.body% diisi oleh SvelteKit -->
			<h1>Halaman Utama</h1>
			<p>Selamat datang di website ini.</p>
		</div>
	</body>
</html>

Jika pengguna berpindah ke halaman /kontak yang dirender oleh src/routes/kontak/+page.svelte, proses yang sama akan terjadi, namun dengan konten dari kontak/+page.svelte.

Kesimpulan

app.html adalah file HTML statis yang berfungsi sebagai template utama. SvelteKit secara dinamis menyuntikkan konten <svelte:head> ke %sveltekit.head% dan konten halamanmu +page.svelte dan +layout.svelte ke %sveltekit.body%.

Note: Kamu akan sangat jarang sekali mengedit app.html.