Sveltekit Load Data SSR Universal Server

load mengambil data sebelum halaman dirender. load di +page.js (universal) atau +page.server.js (server).

Definisi

export const load = async ({ params, fetch }) => ({ post }); hasil jadi data prop di +page.svelte.

Kapan dipakai

Ambil data dari API/DB saat navigasi atau SSR.

Cara kerja

js

// +page.server.js
export const load = async ({ params, locals }) => {
    const post = await db.post.find(params.slug);
    return { post };
};
// +page.svelte
<script>
  export let data;
</script>
<h1>{data.post.title}</h1>

Struktur alur

Catatan implementasi

• .server.js jalan di server (aman untuk secret/DB).
• fetch bawa cookie otomatis (SSR).
• export const ssr/prerender untuk kontrol.

Kesalahan umum

• Secret di .js universal (harus .server.js).
• Mutasi data di load (load harus murni).
• Lupa return object (harus {}).

Referensi terkait

• SvelteKit Routing
• Svelte Lifecycle