Guides & Tutorials

How to Use SvelteKit with Edge Functions

Guides & Tutorials

How to Use SvelteKit with Edge Functions

When we announced Netlify Edge Functions, we hinted at the fact we were working with SvelteKit to get Edge Functions support included in the SvelteKit adapter. We’re happy to share that full support for Netlify Edge Functions with SvelteKit is here!

Now, if you pass the option edge: true to the SvelteKit adapter function, endpoints will execute in a Deno-based edge function that's deployed closer to the site visitor.

What is SvelteKit?

SvelteKit is an open-source framework for building applications with Svelte components. It’s known for compiling everything to JavaScript instead of using a virtual DOM, which results in a snappy user experience.

When you build with SvelteKit, every page of your app is a Svelte component and those pages are rendered server-side. Content can be “hydrated” from the server into an HTML page, and certain pages that don’t require hydration can be set to render without any JavaScript at all. The ability to mix and match rendering modes gives developers flexibility to build highly performant web apps.

What are Edge Functions?

Edge Functions connect the Netlify platform and workflow with Deno, an open runtime standard at the network edge. Edge Functions are designed to work with any number of frameworks, including: Astro, Eleventy, Hydrogen, Remix, Next.js, Nuxt, and SvelteKit, to start.

Two reasons to use Edge Functions with SvelteKit

There are two reasons you should consider using Edge Functions with SvelteKit.

First, you can use Edge Functions to run your entire SvelteKit application at the edge. Unlike with static-site generator frameworks, SvelteKit pages are generated with functions. Enabling Edge Functions ensures that the functions that generate those pages are moved to the Deno-based runtime, which means those functions will run closer to the locations of end-users requesting pages. When you’re using any framework that relies heavily on server-side rendering (SSR), enabling edge functions improves the overall performance and user experience for your app.

Second, you can take advantage of Edge Functions to achieve middleware use cases such as: localization, personalization, authentication, A/B testing, or any kind of dynamic content you want to display to users.

Beyond Edge Functions, you may also want to run other types of serverless functions in your application to handle events, execute scheduled tasks, or run long-running services in the background. One benefit of the Netlify platform is you can run all of these types of functions—serverless functions and Edge Functions—in a single place and deploy them together.

How to enable Edge Functions with your SvelteKit project

If you’re already building a SvelteKit project with Netlify, enabling Edge Functions is as simple as making a small change to the adapter configuration, setting edge: true.

If you’re deploying a SvelteKit project to Netlify for the first time, you will want to get your project running locally and then use npm or yarn to install the Netlify adapter.

Once the adapter is installed in your project, you’ll update your svelte.config.js file and add the adapter there. While you’re adding the adapter, you can go ahead and set Edge Functions to true.

import adapter from '@sveltejs/adapter-netlify';

export default {
  kit: {
    adapter: adapter({
      edge: true
    })
  }
};

Finally, you’ll create a netlify.toml file where you’ll specify a build command and publish directory.

Once all of those pieces are in place, you can deploy your project to Netlify from the command line, with your Git-based workflow, or manually through the Netlify web UI!

Visit the Netlify docs for a step-by-step walk-through of the deployment flow.

Why developers run SvelteKit on Netlify

As a platform, Netlify delivers a number of key benefits to developers and teams. When developers choose to deploy SvelteKit on Netlify, they also benefit from:

The ability to program and customize an advanced build workflow with Netlify Build and build plugins;
Faster feedback loops with teammates and stakeholders, using deploy previews to gather comments and sync them to tools where teams get work done;
Easier integrations, leveraging the power of Netlify Graph to explore and develop against third-party APIs; all on top of
A truly open ecosystem that’s standards-based, where you can always pick the right tool for the job and bring all of your tools together on one platform.