{"id":"pg_i-l_8qzl_azq","property_id":"prp_pklgwresh6hp","domain_id":"dom_zrkwapcbulfb","root_domain":"vercel.com","locale":"en","url":"https://vercel.com/docs/frameworks/full-stack/sveltekit","url_hash":"6411c2d25baaec5a38a92f33047269a014e38579e34d106308cdbad26a6b4409","path":"/docs/frameworks/full-stack/sveltekit","depth":1,"canonical_url":"https://vercel.com/docs/frameworks/full-stack/sveltekit","canonical_page_id":null,"page_type":"docs","page_type_guess":"docs","state":"indexed","skip_reason":"budget","priority":"1.4","discovered_via":"sitemap","first_seen_at":"2026-08-27T09:05:09.951Z","last_seen_at":"2026-09-26T09:10:02.787Z","http_status":200,"content_hash":"7e41a7cf565d798b4d821df48f74e527bea6e52c216b72c60e0cd19efc0b7d6f","title":"SvelteKit on Vercel","description":"Deploy SvelteKit applications to Vercel and configure the adapter, rendering, streaming, ISR, analytics, and Routing Middleware.","author":"Vercel","published_at":null,"modified_at":"2026-08-26T18:10:00.000Z","word_count":2543,"reading_time_sec":694,"lang_detected":"en","images":[],"links_out":null,"markdown_source":"readability","refresh_interval":"monthly","last_fetched_at":"2026-09-26T09:09:20.424Z","next_refresh_at":"2026-10-26T09:09:20.424Z","runs_count":1,"changes_count":0,"last_changed_at":null,"fail_count":0,"last_error":null,"created_at":"2026-08-27T09:05:09.951Z","updated_at":"2026-08-27T09:05:09.951Z","inlinks":28,"inlinks_body":8,"outlinks":221,"outlinks_external":13,"anchor_terms":["PreviousSvelteKit","SvelteKit"],"template_score":"0.93333333333333333333","cash":"0.0270511804629571773","cash_total":"0.65125609932150975790","pagerank":"0.0336226975825662","is_orphan":false,"link_confirmed":true,"discovered_wave":0,"embedded_hash":null,"embedded_at":null,"domain_name":"Vercel Inc.","brand_color":null,"domain_rank":579,"spam_score":14,"markdown":"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.\n\nYou can deploy your SvelteKit projects to Vercel with zero configuration, enabling you to use [Preview Deployments](https://vercel.com/docs/deployments/environments#preview-environment-pre-production), [Web Analytics](#web-analytics), [Vercel functions](https://vercel.com/docs/functions), and more.\n\nTo get started with SvelteKit on Vercel:\n\n- If you already have a project with SvelteKit, install [Vercel CLI](https://vercel.com/docs/cli) and run the `vercel` command from your project's root directory\n- Clone one of our SvelteKit example repos to your favorite git provider and deploy it on Vercel with the button below:\n\nVercel deployments can [integrate with your git provider](https://vercel.com/docs/git) to [generate preview URLs](https://vercel.com/docs/deployments/environments#preview-environment-pre-production) for each pull request you make to your SvelteKit project.\n\nWhen 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.\n\nWe 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](#configure-your-sveltekit-deployment).\n\nThe following instructions will guide you through adding the Vercel adapter to your SvelteKit project.\n\n1. You can add [the Vercel adapter](https://kit.svelte.dev/docs/adapter-vercel) to your SvelteKit project by running the following command:\n \n2. Add the Vercel adapter to your `svelte.config.js` file, [which should be at the root of your project directory](https://kit.svelte.dev/docs/configuration).\n \n In your `svelte.config.js` file, import `adapter` from `@sveltejs/adapter-vercel`, and add your preferred options. The following example shows the default configuration, which uses the Node.js runtime (which run on Vercel functions).\n \n [Learn more about configuring your Vercel deployment in our configuration section below](#configure-your-sveltekit-deployment).\n \n\nYou can configure how your SvelteKit project gets deployed to Vercel at the project-level and at the route-level.\n\nChanges 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.\n\nThe following is an example of a `svelte.config.js` file that will deploy using server-side rendering in Vercel's Node.js serverless runtime:\n\nYou can also configure how individual routes deploy by exporting a `config` object. The following is an example of a route that will deploy on Vercel's Edge runtime:\n\n[Learn about all the config options available in the SvelteKit docs](https://kit.svelte.dev/docs/adapter-vercel#deployment-configuration). You can also see the type definitions for config object properties in [the SvelteKit source code](https://github.com/sveltejs/kit/blob/master/packages/adapter-vercel/index.d.ts#L38).\n\nSvelteKit's docs have [a comprehensive list of all config options available to you](https://kit.svelte.dev/docs/adapter-vercel#deployment-configuration). This section will cover a select few options which may be easier to use with more context.\n\nBy default, your SvelteKit routes get bundled into one Function when you deploy your project to Vercel. This configuration typically reduces how often your users encounter [cold starts](https://vercel.com/docs/fundamentals/what-is-compute#cold-and-hot-boots).\n\nIn most cases, there is no need to modify this option.\n\nSetting `split: true` in your Svelte config will cause your SvelteKit project's routes to get split into separate Vercel Functions.\n\nSplitting your Functions is not typically better than bundling them. You may want to consider setting `split: true` if you're experiencing either of the following issues:\n\n- 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 [Function size limits](https://vercel.com/docs/functions/limitations#bundle-size-limits) to learn more.\n- Your app is experiencing abnormally long cold start times. Batching Vercel 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.\n\nChoosing a region allows you to reduce latency for requests to functions. If you choose a Function region geographically near dependencies, or nearest to your visitor, you can reduce your Functions' latency.\n\nBy default, your Vercel Functions will be deployed in _Washington, D.C., USA_, or `iad1`. Adding a region ID to the `regions` array will deploy your Vercel functions there. [See our Vercel Function regions docs to learn how to override this settings](https://vercel.com/docs/functions/configuring-functions/region#select-a-default-serverless-region).\n\nVercel supports streaming API responses over time with SvelteKit, allowing you to render parts of the UI early, then render the rest as data becomes available. Doing so lets users interact with your app before the full page loads, improving their perception of your app's speed. Here's how it works:\n\n- SvelteKit enables you to use a `+page.server.ts` file to fetch data on the server, which you can access from a `+page.svelte` file located in the same folder\n- You fetch data in a [`load`](https://kit.svelte.dev/docs/load) function defined in `+page.server.ts`. This function returns an object\n - Top-level properties that return a promise will resolve before the page renders\n - Nested properties that return a promise [will stream](https://kit.svelte.dev/docs/load#streaming-with-promises)\n\nThe following example demonstrates a `load` function that will stream its response to the client. To simulate delayed data returned from a promise, it uses a `sleep` method.\n\nYou could then display this data by creating the following `+page.svelte` file in the same directory:\n\nTo summarize, Streaming with SvelteKit on Vercel:\n\n- Enables you to stream UI elements as data loads\n- Supports streaming through Vercel Functions\n- Improves perceived speed of your app\n\n[Learn more about Streaming on Vercel](https://vercel.com/docs/functions/streaming-functions).\n\nServer-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.\n\nVercel 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.\n\nSvelteKit projects are server-side rendered by default. You can configure individual routes to prerender 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.\n\nWhile server-side rendered SvelteKit apps do support middleware, SvelteKit does not support URL rewrites from middleware.\n\n[See the SvelteKit docs on prerendering to learn more](https://kit.svelte.dev/docs/page-options#prerender).\n\nTo summarize, SSR with SvelteKit on Vercel:\n\n- Scales to zero when not in use\n- Scales automatically with traffic increases\n- Has zero-configuration support for [`Cache-Control` headers](https://vercel.com/docs/caching/cdn-cache), including `stale-while-revalidate`\n\n[Learn more about SSR](https://kit.svelte.dev/docs/page-options#ssr)\n\nVercel 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.\n\nThese 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](https://vercel.com/docs/environment-variables/system-environment-variables).\n\nSvelteKit 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 that you should not share publicly.\n\n[System Environment Variables](https://vercel.com/docs/environment-variables/system-environment-variables) are private and you should never expose them to the frontend client. This means you can only import them from `'$env/static/private'` or `'$env/dynamic/private'`.\n\nThe 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](https://kit.svelte.dev/docs/load) for a Svelte layout:\n\nYou could reference that variable in [a corresponding layout](https://kit.svelte.dev/docs/load#layout-data) as shown below:\n\nTo summarize, the benefits of using Environment Variables with SvelteKit on Vercel include:\n\n- Access to vercel deployment information, dynamically or statically, with our preconfigured System Environment Variables\n- Access to automatically-configured environment variables provided by [integrations for your preferred services](https://vercel.com/docs/environment-variables#integration-environment-variables)\n- Searching and filtering environment variables by name and environment in Vercel's dashboard\n\n[Learn more about Environment Variables](https://vercel.com/docs/environment-variables)\n\nIncremental 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.\n\n[See our ISR docs to learn more](https://vercel.com/docs/incremental-static-regeneration).\n\nTo deploy a SvelteKit route with ISR:\n\n- Export a `config` object with an `isr` property. Its value will be the number of seconds to wait before revalidating\n- To enable on-demand revalidation, add the `bypassToken` property to the `config` object. Its value gets checked when `GET` or `HEAD` requests get sent to the route. If the request has a `x-prerender-revalidate` header with the same value as `bypassToken`, the cache will be revalidated immediately\n\nThe following example demonstrates a SvelteKit route that Vercel will deploy with ISR, revalidating the page every 60 seconds, with on-demand revalidation enabled:\n\n[Learn more about ISR with SvelteKit](https://kit.svelte.dev/docs/adapter-vercel#incremental-static-regeneration).\n\nTo summarize, the benefits of using ISR with SvelteKit on Vercel include:\n\n- Better performance with our global [CDN](https://vercel.com/docs/cdn)\n- Zero-downtime rollouts to previously statically generated pages\n- Framework-aware infrastructure enables global content updates in 300ms\n- Generated pages are both cached and persisted to durable storage\n\n[Learn more about ISR](https://vercel.com/docs/incremental-static-regeneration)\n\nNew project deployments can lead to version skew. This can happen when your users are using your app and a new version gets deployed. Their deployment version requests assets from an older version. And those assets from the previous version got replaced. This can cause errors when those active users navigate or interact with your project.\n\nSvelteKit has a skew protection solution. When it detects version skew, it triggers a hard reload of a page to sync to the latest version. This does mean the client-side state gets lost. With Vercel skew protection, client requests get routed to their original deployment. No client-side state gets lost. To enable it, visit the Advanced section of your project settings on Vercel.\n\n[Learn more about skew protection with SvelteKit](https://kit.svelte.dev/docs/adapter-vercel#skew-protection).\n\nTo summarize, the benefits of using ISR with SvelteKit on Vercel include:\n\n- Mitigates the risk of your active users encountering version skew\n- Avoids hard reloads for current active users on your project\n\n[Learn more about skew protection on Vercel](https://vercel.com/docs/skew-protection).\n\n[Image Optimization](https://vercel.com/docs/image-optimization) helps you achieve faster page loads by reducing the size of images and using modern image formats.\n\nWhen deploying to Vercel, you can optimize your images on demand, keeping your build times fast while improving your page load performance and [Core Web Vitals](https://vercel.com/docs/speed-insights/metrics#core-web-vitals-explained).\n\nTo use Image Optimization with SvelteKit on Vercel, use the [`@sveltejs/adapter-vercel`](#use-vercel-features-with-svelte) within your `svelte.config.ts` file.\n\nThis allows you to specify [configuration options](https://vercel.com/docs/build-output-api/configuration#images) for Vercel's native image optimization API.\n\nTo use image optimization with SvelteKit, you have to construct your own `srcset` URLs. You can create a library function that will optimize `srcset` URLs in production for you like this:\n\nUse an `img` or any other image component with an optimized `srcset` generated by the `optimize` function:\n\nTo summarize, using Image Optimization with SvelteKit on Vercel:\n\n- Configure image optimization with `@sveltejs/adapter-vercel`\n- Optimize for production with a function that constructs optimized `srcset` for your images\n- Helps your team ensure great performance by default\n- Keeps your builds fast by optimizing images on-demand\n\n[Learn more about Image Optimization](https://vercel.com/docs/image-optimization)\n\nVercel's Web Analytics features enable you to visualize and monitor your application's performance over time. Analytics in your project sidebar's dashboard offers detailed insights into your website's visitors, with metrics like top pages, top referrers, and user demographics.\n\nTo use Web Analytics, open Analytics in your project sidebar on Vercel and select Enable in the modal that appears.\n\nTo 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:\n\nIn your SvelteKit project's main `+layout.svelte` file, add the following `