How to execute code on SvelteKit app start up

In SvelteKit, if you want to execute code during application startup, several methods are typically available, depending on the specific timing and environment (e.g., client-side or server-side). Here are some common methods and examples:

1. Using the $layout.svelte File

In SvelteKit, the $layout.svelte file serves as the global layout component for the application. It is shared across multiple pages, making it suitable for executing code during application startup.

For example, if you want to fetch data from an API each time the application loads, you can add code to the <script> tag in $layout.svelte:

svelte
<script>
  import { onMount } from 'svelte';

  onMount(async () => {
    const response = await fetch('/api/data');
    const data = await response.json();
    console.log(data);
  });
</script>

2. Using the Server-Side Hook: handle

In SvelteKit, the handle hook allows you to execute code before the request is processed. This is particularly useful for server-side logic, such as checking user authentication status, logging, or loading data available only on the server.

You can define this hook in the src/hooks.server.js file:

javascript
export async function handle({ request, resolve }) {
  // Execute code before processing the request
  console.log('Incoming request:', request);

  const response = await resolve(request);

  // You can also modify the response before sending it back to the client
  return response;
}

3. Using the Client-Side Hook: start

If you need to execute code when the client application starts, you can use the start hook. You can add this hook in the src/app.d.ts file:

javascript
// src/app.d.ts
import { startClient } from '$app/navigation';

startClient(async () => {
  console.log('Client is starting');
  // You can execute more client-specific initialization code here
});

Comprehensive Example

Suppose we need to fetch user information from an API during application startup and perform initialization based on this data. We can do the following:

1. Server-side: Fetch user information in the handle hook.

2. Client-side: Set user state or perform other client-specific initialization operations in $layout.svelte or startClient.

By doing this, you can ensure that the appropriate initialization code is executed at the correct stage of the application, whether on the server or client.