Apa itu fungsi load di SvelteKit?

load adalah mekanisme bawaan SvelteKit untuk mempersiapkan data sebelum halaman dirender. Ketika nilai dikembalikan dari load, ia otomatis tersedia di komponen +page.svelte melalui properti data. Pendekatan ini memisahkan logika pengambilan data dari tampilan, sehingga komponen hanya fokus pada rendering sedangkan file route bertanggung jawab atas kebutuhan data.

Perbedaan +page.js dan +page.server.js

Secara umum:

  • +page.js digunakan untuk universal load, yang berarti fungsi load dapat berjalan di server saat render awal dan juga di browser ketika pengguna navigasi client-side.
  • +page.server.js digunakan untuk server-only load, sehingga hanya dijalankan di server. Cocok untuk mengambil data yang memerlukan token privat, secret, atau akses langsung ke database.

Pilih +page.server.js ketika logika Anda tidak boleh terekspos ke browser; misalnya, ketika menggunakan API yang memerlukan header Authorization dan Anda tidak ingin mengirimkannya ke klien.

Contoh: ambil data dari API dummy

Bayangkan Anda ingin mengambil daftar tugas dari API publik. Berikut contoh sederhana +page.js yang memanfaatkan API JSONPlaceholder.

+page.js (universal load)

export async function load({ fetch }) {
  const response = await fetch('https://jsonplaceholder.typicode.com/todos?_limit=5');

  if (!response.ok) {
    throw new Error('Gagal mengambil daftar todo');
  }

  const todos = await response.json();
  return { todos };
}

Karena kode ini bisa berjalan di browser saat navigasi, pastikan API publik tidak memerlukan secret. Jika API membutuhkan token privat, pindahkan logika ke +page.server.js.

+page.server.js (server-only load dengan token)

export async function load({ fetch }) {
  const token = process.env.API_SECRET_TOKEN;

  const response = await fetch('https://api.internal.example.com/tasks', {
    headers: {
      Authorization: `Bearer ${token}`
    }
  });

  if (!response.ok) {
    return { tasks: [] };
  }

  const tasks = await response.json();
  return { tasks };
}

Gunakan process.env untuk menyimpan secret. Jangan pernah hardcode token di file yang bisa dijangkau oleh browser.

Menampilkan data di +page.svelte

Setelah data tersedia dari load, Anda dapat mengaksesnya melalui properti data. Berikut contoh komponen untuk menampilkan daftar tugas:

 <script>
  export let data;
</script>

<main>
  <h2>Daftar Todo</h2>
  <ul>
    {#each data.todos ?? data.tasks as item}
      <li>
        <strong>{item.title}</strong>
        <span>{item.completed ? ' Selesai' : ' Belum selesai'}</span>
      </li>
    {/each}
  </ul>
</main>

Dengan cara ini, komponen cukup menerima data yang sudah siap. Anda bisa menambahkan loading state atau fallback ketika data kosong.

Praktik terbaik dan debugging

  • Gunakan environment variable untuk token atau secret, dan pastikan didefinisikan di .env yang tidak dikirim ke versi kontrol.
  • Validasi respons sebelum mengembalikan data, misalnya periksa response.ok atau struktur JSON.
  • Gunakan error handling seperti throw error(500, 'Pesan') agar SvelteKit bisa menampilkan halaman error standar.
  • Cek log server ketika data tidak muncul. Pada mode development, error di +page.server.js akan tampil di terminal.

Kesimpulan

Fungsi load di SvelteKit membuat data fetching lebih terstruktur. Pilih +page.js saat logika bisa dijalankan di client, dan +page.server.js untuk data sensitif. Dengan memisahkan tanggung jawab, aplikasi Anda menjadi lebih mudah dipelihara.