SvelteKit Hooks: Intercepting Requests and Events

Why it exists

SvelteKit needs a centralized way to run code for every request or on application startup, without cluttering individual page components. Hooks provide a dedicated place for this cross-cutting logic, such as authentication, logging, or initializing a database client.

The mental model

Think of SvelteKit Hooks as checkpoints or middleware in your application's lifecycle. A request comes in, hits your server hook first, and you decide what to do: modify it, pass it along to SvelteKit's router, or respond directly and end the chain. They give you fine-grained control over the framework's behavior.

How it works

You create optional files like src/hooks.server.js for server-side logic or src/hooks.client.js for browser-side logic. Inside these, you export specific functions that SvelteKit is designed to find and execute. For example, exporting a handle function in hooks.server.js makes it run for every single request the server receives. This function gets the request event and a resolve function. You can inspect the event, add data to it, and then call resolve(event) to let SvelteKit render the page, or you can return your own Response object to bypass SvelteKit's router entirely.

When to use it

Use hooks for logic that applies globally across your application. The server handle hook is perfect for checking authentication tokens on incoming requests, injecting user data into the event.locals object for downstream use, or setting security headers on all responses. The startup behavior (code at the top level of a hooks file) is ideal for initializing singletons like a database connection pool.

When not to use it

Avoid putting page-specific logic in a hook. If code only applies to the /profile route, put it in the +page.server.js for that route. Hooks are for concerns that cut across many or all routes. Overusing them can make it hard to trace where behavior is coming from, as the logic is decoupled from the page that uses it.

One canonical example

A common use for the server handle hook is to implement custom routing or block access. In src/hooks.server.js, you might check if a request's path starts with /api/custom. If it does, you can handle it with your own logic and return a new Response directly, completely bypassing the SvelteKit router. For all other requests, you must call await resolve(event) to let the framework proceed as normal. Failing to do so for a given path will cause requests to that path to hang.