Sveltekit Hooks Handle Server Hooks Locals Sequence Diagram

Definisi

hooks.server.ts dan hooks.client.ts adalah titik ekstensi global SvelteKit. handle (server) berjalan tiap request — cocok untuk auth, logging, modifikasi event.locals. handle bisa di-chain lewat sequence(). Server hooks lain: handleFetch, handleError.

Kapan dipakai

Pakai untuk middleware-level logic: cek session tiap request, set locals.user, transform fetch internal, atau log error global. Jangan taruh logika route spesifik (pindahkan ke +page.server.ts).

Cara kerja

handle dasar

ts

// hooks.server.ts
import type { Handle } from '@sveltejs/kit';
 
export const handle: Handle = async ({ event, resolve }) => {
  event.locals.user = await getSession(event.cookies);
  if (event.url.pathname.startsWith('/admin') && !event.locals.user) {
    throw redirect(303, '/login');
  }
  return resolve(event);
};

chaining

ts

import { sequence } from '@sveltejs/kit/hooks';
export const handle = sequence(authHandle, loggingHandle);

Struktur alur

Catatan implementasi

• event.locals adalah objek bebas — isi di handle, baca di +page.server.ts/+layout.server.ts.
• sequence(...) menjaga urutan; tanpa itu hanya handle terakhir yang dipakai.
• handleFetch untuk intercept fetch dari server ke API eksternal (suntik token).
• Jangan resolve dua kali atau lupa return.

Kesalahan umum

• Lupa return resolve: halaman kosong/500; selalu return resolve(event).
• Baca locals sebelum di-set: pastikan urutan di sequence benar.
• Auth di handle vs layout: duplikasi; pilih satu tempat (handle lebih pusat).
• Throw di handle tanpa redirect import: import redirect dari @sveltejs/kit.

Referensi terkait

• SvelteKit Form Actions Lanjut: named actions, fail
• Svelte Routing dengan SvelteKit: Pages, Layouts, Load
• Next.js Middleware Matcher dan Chaining