SvelteKit on Vercel

SvelteKit is a frontend framework that enables you to build Svelte applications with modern techniques, such as Server-Side Rendering, automatic code splitting, and advanced routing.

You can deploy your SvelteKit projects to Vercel with zero configuration, enabling you to use Preview Deployments, Analytics, Serverless Functions, and more.

There are multiple ways to get started with SvelteKit on Vercel:

• Choose a template from the Vercel templates marketplace
• If you already have a project with SvelteKit, install Vercel CLI and run the vercel command from your project's root directory
• Clone one of our SvelteKit example repos to your favorite git provider and deploy it on Vercel with the button below:

Deploy our SvelteKit template, or view a live example.

DeployLive Example

Vercel deployments can integrate with your git provider to generate preview URLs for each pull request you make to your SvelteKit project.

When you create a new SvelteKit project with npm create svelte@latest, it installs adapter-auto by default. This adapter detects that you're deploying on Vercel and installs the @sveltejs/adapter-vercel plugin for you at build time.

We recommend installing the @sveltejs/adapter-vercel package yourself. Doing so will ensure version stability, slightly speed up your CI process, and allows you to configure default deployment options for all routes in your project.

The following instructions will guide you through adding the Vercel adapter to your SvelteKit project.

pnpm i @sveltejs/adapter-vercel

import adapter from '@sveltejs/adapter-vercel';
 
export default {
  kit: {
    adapter: adapter(),
  },
};

You can configure how your SvelteKit project is deployed to Vercel at the project-level and at the route-level.

Changes to the config object you define in svelte.config.js will affect the default settings for routes across your whole project. To override this, you can export a config object in any route file.

The following is an example of a svelte.config.js file that will deploy using server-side rendering in Vercel's Node.js 18.x serverless runtime:

import adapter from '@sveltejs/adapter-vercel';
 
/** @type {import('@sveltejs/kit').Config} */
const config = {
  kit: {
    adapter: adapter({
      runtime: 'nodejs18.x',
    }),
  },
};
 
export default config;

You can also configure how individual routes are deployed by exporting a config object. The following is an example of a route that will deploy on Vercel's Edge runtime:

import { PageServerLoad } from './$types';
 
export const config = {
  runtime: 'edge',
};
 
export const load = ({ cookies }): PageServerLoad<any> => {
  // Load function code here
};

Learn about all the config options available in the SvelteKit docs. You can also see the type definitions for config object properties in the SvelteKit source code.

SvelteKit's docs have a comprehensive list of all config options available to you. This section will cover a select few options which may be easier to use with more context.

By default, your SvelteKit routes are bundled into one Serverless or Edge Function when you deploy your project to Vercel. This configuration typically reduces how often your users encounter cold starts.

In most cases, there is no need to modify this option.

Setting split: true in your Svelte config will cause your SvelteKit project's routes to be split into separate Edge or Serverless Functions.

Splitting your Functions is not typically better than bundling them, however you may want to consider setting split: true if you're experiencing either of the following issues:

• You have exceeded the Function size limit for the runtime you're using. Batching too many routes into a single Function could cause you to exceed Function size limits for your Vercel account. See our Serverless Function size limits and Edge Function size limits to learn more.
• Your app is experiencing abnormally long cold start times. Batching Serverless Functions into one Function will reduce how often users experience cold starts. It can also increase the latency they experience when a cold start is required, since larger functions tend to require more resources. This can result in slower responses to user requests that occur after your Function spins down.

Your SvelteKit routes are deployed to Vercel's Node.js (Serverless) runtime by default.

You can edit your config to deploy as Edge Functions instead by setting runtime: 'edge' in your config object.

Edge and Serverless functions offer a cost-effective, scalable solution for serving personalized content to your visitors, both dynamically and statically.

See our Functions comparison table to better understand which runtime you should choose.

Choosing a region allows you to reduce latency for requests to Serverless and Edge routes. If you choose a Function region geographically near dependencies, or nearest to your visitor, you can reduce your Functions' overall latency.

By default, your Serverless Functions will be deployed in Washington, D.C., USA, or iad1. Adding a region ID to the regions array will deploy your Serverless Functions there. See our Serverless Function regions docs to learn how to override this settings. Only Enterprise customers can deploy Serverless Functions to multiple regions.

Edge Functions are deployed globally, and will invoke in the region nearest to each visitor by default. If your Edge Functions depend on data sources far from the user, this can add latency to the request.

Adding a valid region ID to your regions array will cause your Edge Function to always invoke in the specified region, preventing them from triggering far away from their dependencies. Support for multiple edge regions is in progress.

See our Edge Function regions docs to learn more.

Server-Side Rendering (SSR) allows you to render pages dynamically on the server. This is useful for pages where the rendered data needs to be unique on every request. For example, verifying authentication or checking the geolocation of an incoming request.

Vercel offers SSR that scales down resource consumption when traffic is low, and scales up with traffic surges. This protects your site from accruing costs during periods of no traffic or losing business during high-traffic periods.

SvelteKit projects are server-side rendered by default. You can configuring individual routes to be prerendered with the prerender page option, or use the same option in your app's root +layout.js or +layout.server.js file to make all your routes prerendered by default.

While server-side rendered SvelteKit apps do support middleware, SvelteKit does not support URL rewrites from middleware.

See the SvelteKit docs on prerendering to learn more.

To summarize, SSR with SvelteKit on Vercel:

Vercel provides a set of System Environment Variables that our platform automatically populates. For example, the VERCEL_GIT_PROVIDER variable exposes the Git provider that triggered your project's deployment on Vercel.

These environment variables will be available to your project automatically, and you can enable or disable them in your project settings on Vercel. See our Environment Variables docs to learn how.

SvelteKit allows you to import environment variables, but separates them into different modules based on whether they're dynamic or static, and whether they're private or public. For example, the '$env/static/private' module exposes environment variables that don't change, and should not be shared publicly.

System Environment Variables are private and should never be exposed to the frontend client, which means you can only import them from '$env/static/private' or '$env/dynamic/private'.

The example below exposes VERCEL_COMMIT_REF, a variable that exposes the name of the branch associated with your project's deployment, to a load function for a Svelte layout:

import { LayoutServerLoad } from './types';
import { VERCEL_COMMIT_REF } from '$env/static/private';
 
type DeploymentInfo = {
  deploymentGitBranch: string;
};
 
export function load(): LayoutServerLoad<DeploymentInfo> {
  return {
    deploymentGitBranch: 'Test',
  };
}

You could reference that variable in a corresponding layout as shown below:

<script>
  /** @type {import('./$types').LayoutData} */
  export let data;
</script>
 
<p>This staging environment was deployed from {data.deploymentGitBranch}.</p>

To summarize, the benefits of using Environment Variables with SvelteKit on Vercel include:

Incremental Static Regeneration allows you to create or update content without redeploying your site. When you deploy a route with ISR, Vercel caches the page to serve it to visitors statically, and rebuilds it on a time interval of your choice. ISR has three main benefits for developers: better performance, improved security, and faster build times.

See our ISR docs to learn more.

To deploy a SvelteKit route with ISR, export a config object with an isr property. The following example demonstrates a SvelteKit route that Vercel will deploy with ISR, revalidating the page every 60 seconds.

Learn more about configuring ISR with SvelteKit in their docs.

export const config = {
  isr: {
    expiration: 60,
    bypassToken: 'REPLACE_ME_WITH_SECRET_VALUE',
  },
};

You can also learn more about how ISR works in our ISR Render Function docs.

To summarize, the benefits of using ISR with SvelteKit on Vercel include:

Vercel's Analytics features enable you to visualize and monitor your application's performance over time. The Analytics tab in your project's dashboard offers detailed insights into your website's visitors, with metrics like top pages, top referrers, and user demographics.

To use Analytics, navigate to the Analytics tab of your project dashboard on Vercel and select Enable in the modal that appears.

To track visitors and page views, we recommend first installing our @vercel/analytics package by running the terminal command below in the root directory of your SvelteKit project:

pnpm i @vercel/analytics

In your SvelteKit project's main +layout.svelte file, add the following <script>:

<script>
  import { dev } from '$app/environment';
  import { inject } from '@vercel/analytics';
  inject({ mode: dev ? 'development' : 'production' });
</script>

With the above script added to your project, you'll be able to view detailed user insights in your dashboard on Vercel under the Analytics tab. See our Audiences docs to learn more about the user metrics you can track with Vercel's Analytics.

Your project must be deployed on Vercel to take advantage of the Audiences feature. Work on making this feature more broadly available is in progress.

To summarize, using Analytics with SvelteKit on Vercel:

You can see data about your project's Core Web Vitals performance in your dashboard on Vercel. Doing so will allow you to track your web application's loading speed, responsiveness, and visual stability so you can improve the overall user experience.

See our Web Vitals docs to learn more.

To summarize, using Web Vitals with SvelteKit on Vercel:

See our Frameworks documentation page to learn about the benefits available to all frameworks when you deploy on Vercel.

Learn more about deploying SvelteKit projects on Vercel with the following resources: