SvelteKit’s Deployment Configuration

SvelteKit is a popular framework for building fast and efficient web applications. It recently rolled out its new deployment configuration, which provides developers with complete control over how their routes are deployed to Vercel as functions. This new configuration allows developers to choose to deploy different parts of their app as edge functions, server functions, or even utilize the power of incremental static regeneration, or ISR for short.

In this blog post, we will discuss what each of these features means and show you how to configure your SvelteKit application to make the most of them.

SvelteKit’s new deployment configuration provides three different deployment options, each with its own advantages:

Server functions run on the server, similar to traditional server-side rendering. They’re great for generating dynamic content and interacting with databases.
Edge functions run at the CDN edge, closer to the user, and allow for faster response times and reduced server load. Edge functions can be used to offload some of the work from the server, reducing the need for more expensive serverless functions.
Incremental Static Regeneration (ISR) is a feature that allows you to pre-render pages at build time and then regenerate them at runtime as needed. This means that your website can still serve dynamic content without sacrificing performance. ISR is particularly useful for pages that have frequently updated data or are expected to receive a lot of traffic.

Each of these deployment options has its own benefits, and SvelteKit’s new deployment configuration allows you to take advantage of all of them. In the next section, we’ll show you how to configure your SvelteKit application to use these different options.

Configuring your project

First, it is important to note that these different configurations are Vercel features. Therefore, we need to install and use the adapter-vercel. This adapter will be installed by default when you use adapter-auto, but adding it to your project allows you to specify Vercel-specific options.

To install it, in your terminal run this command:

npm i -D @sveltejs/adapter-vercel

Now, in your svelte.config.js file, replace your adapter-auto with adapter-vercel. This is also one place you can configure your deployment. For example, if you want to deploy all your server routes as edge functions, you could add edge: true, like this:

import adapter from '@sveltejs/adapter-vercel';
import { vitePreprocess } from '@sveltejs/kit/vite';

const config = {
	kit: {
		adapter: adapter({
			edge: true
		})
	},
	preprocess: vitePreprocess()
};

export default config;

By doing this, all functions will be deployed as edge functions. However, to control how each of your routes are deployed to Vercel as functions, you can specify deployment configuration with export const config inside of your server route. Let’s learn how to do this for each configuration type.

Serverless Functions

By default, Vercel automatically configures your server routes as serverless functions. This means that you do not need to add any special configuration. If you want to deploy a route as a serverless function, you can just leave it as is.

Edge Functions

Sometimes you may want to deploy a route as an edge function. To do this, you can add the following code to the top of your file:

export const config = {
	runtime: 'edge'
};

This will configure the route as an edge function when deployed to Vercel. It is important to note that there are other options that can be applied to both serverless and edge functions. You can check out the SvelteKit documentation to learn more.

ISR

Another feature that you can use to optimize the performance of your SvelteKit application is Incremental Static Regeneration (ISR). ISR allows you to cache dynamic content and serve it as static content for a specified period. To configure a route as ISR, you can add the following code to the top of your file:

export const config = {
	isr: {
		// Expiration time (in seconds) before the cached asset will be re-generated //by invoking the Serverless Function.
		// Setting the value to `false` means it will never expire.
		expiration: 10
	}
};

The expiration property sets the amount of time in seconds before the cached asset will be re-generated by invoking the serverless function. Setting this value to false means it will never expire. If you set it to 10, as we did in the example above, the asset will expire 10 seconds after the last page visit.

Deploying with Vercel

To deploy your SvelteKit application to Vercel, you can instantly start from one of our many templates, or follow these steps:

Go to your Vercel dashboard
Click on “New Project”
Import your desired repository
Click “Deploy”

Once your application is deployed, you can test it out by navigating to the URL provided by Vercel. Both serverless and edge functions will update the date time every time the page is loaded. However, edge functions are faster and cost less because they are closer to the user.

When using ISR, the page will not be regenerated until the expiration time has passed. This means that the date time will not update every time the page is loaded. If you wait for the expiration time to pass and then refresh the page, you will see that it has been regenerated.

Configuring your SvelteKit application using Vercel’s deployment options is a great way to optimize its performance. By leveraging serverless, edge, or ISR functions for your routes, you can significantly reduce load times and provide a faster, smoother user experience. If you’re interested in seeing these configurations in action, check out our SvelteKit template with a live demo, clone the repo to get started, or reference the code. And for those who prefer video content, check out our comprehensive YouTube video on this topic.