Knowledge · Guidelines · sveltekit

Sveltekit Routing Patterns

SvelteKit routing, server load functions, form actions, error handling, and layout patterns. Sourced from official SvelteKit documentation — enforced during FDD4.UI steps. Complements the sveltekit-server-load-pattern solution with broader routing coverage.

Andrei Solovev

Metadata

sveltekit sveltekit

Procedures

Showing 3 of 12

SK.1 ALL data loading MUST happen in +page.server.ts load functions — NEVER in onMount or client-side fetch

// +page.server.ts
import type { PageServerLoad } from './$types';

export const load: PageServerLoad = async ({ fetch, params }) => {
  const res = await fetch(`${API_BASE}/api/items/${params.id}`);
  if (!res.ok) throw error(res.status, 'Failed to load');
  return await res.json();
};

SK.2 Use the error() helper from @sveltejs/kit for HTTP error responses in load functions

import { error } from '@sveltejs/kit';

export const load: PageServerLoad = async ({ params }) => {
  const post = await getPost(params.slug);
  if (!post) error(404, { message: 'Not found' });
  return { post };
};

SK.3 Use redirect() helper for server-side redirects — NEVER client-side window.location

import { redirect } from '@sveltejs/kit';

export const load: LayoutServerLoad = ({ locals }) => {
  if (!locals.user) redirect(307, '/login');
};