SvelteKit
SvelteKit is the official Web application framework for Svelte, offering file system-based routes, server-side rendering (SSR), static site generation (SSG) and other ready-to-use features to help developers build high-performance modern Web applications.
Note:
Currently, Pages supports SvelteKit version 2.4+, with the earliest version being 2.4.0.
Core Features
SvelteKit offers high-performance rendering capability, simplified development process, and flexible application architecture to build blogs, marketing landing pages, documentation websites, and other small and medium Web applications with relatively high performance requirements.
Seamless integration with Svelte: Leverages Svelte's compilation advantage to generate efficient vanilla JavaScript at build stage, with no virtual DOM, offering extremely high runtime performance and concise development experience.
Flexible rendering modes: Supports server-side rendering (SSR), pre-rendering (Prerender), and client-side rendering (CSR), with the ability to choose appropriate rendering strategies per page.
File system-based routing: Automatically generates routes based on conventional directory structure, supports dynamic routing and nested layouts, with no need to manually maintain additional routing configuration.
Uniform data loading mechanism: Uses a uniform
load function to perform data loading, supporting both server-side and client environments.Built-in enhanced capabilities: Provides capabilities such as form enhancement, streaming rendering, error handling, and application hooks, with gradual application extension based on needs.
Quick Start
Deploy a SvelteKit project on EdgeOne Pages in the following ways:
Import a SvelteKit project via Git repository
Select the SvelteKit template from the Pages template library to deploy
Learn about SvelteKit deployment performance on Pages. Click the sample template below:
Support for SvelteKit on Pages
The following table shows the key characteristics of SvelteKit currently supported by Pages. The platform will support additional features as soon as possible, but experimental features may not yet be fully stable.
SvelteKit Features | System support |
Server-Side Rendering (SSR) | ✅ |
Static Site Generation (SSG) | ✅ |
Prerender | ✅ |
Filesystem-based Router | ✅ |
Streaming With Promises | ✅ |
Form Actions | ✅ |
Hooks | ✅ |
Observability | Not supported. |
Deploying a SvelteKit Project on Pages
SvelteKit supports deployment to different platforms through its adapter system. Adapters are plug-ins that convert build artifacts into the format required by the target platform. Pages provides the official adapter
@edgeone/sveltekit, used to generate Pages deployment artifacts. In conjunction with the Pages scaffolding tool, you can quickly deploy SvelteKit projects to the Pages platform.
To deploy a SvelteKit project on Pages, see the following steps.
1. Installing an Adapter
Install the adapter using npm.
npm install @edgeone/sveltekit
2. Configuring Svelte.Config.Js
Modify the configuration file
svelte.config.js, introduce and use the adapter @edgeone/sveltekit.import adapter from '@edgeone/sveltekit';import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';/** @type {import('@sveltejs/kit').Config} */const config = {preprocess: vitePreprocess(),kit: {// use edgeone adapteradapter: adapter()}};export default config;
3. Deploying a Project
Git Connection Deployment
After integrating the adapter, you can submit the project to platforms like GitHub or GitLab, and use our Git Connection Deployment.
CLI Deployment
You can also install the Pages scaffolding tool. For detailed installation and usage, refer to EdgeOne CLI. Once configured, use the
edgeone pages deploy command to deploy the project. During deployment, the CLI will first automatically build the project, then upload and publish the build artifacts.Note:
EdgeOne CLI version requirement ≥ 1.2.0. Before deployment, please first check the version to avoid deployment failure.
Server-Side Rendering (SSR)
By default, SvelteKit uses server-side rendering (SSR), generating HTML on the server and sending it to the client.
Configure rendering parameters in the following files to modify the default behavior:
+page.js / +page.server.js - page-level configuration+layout.js / +layout.server.js - layout-level configuration
For example, set
ssr = false to switch to client-side rendering (CSR). The server will return a blank page framework, and the client-side JavaScript will complete the rendering.// +page.jsexport const ssr = false;
Pre-Rendering (Prerender)
SvelteKit supports enabling pre-rendering for specified pages, generating static HTML files during build while keeping other pages dynamically rendered. If the entire application is suitable for pre-rendering, use the
@sveltejs/adapter-static adapter to deploy the site-wide static website to Pages.// +page.js/+page.server.jsexport const prerender = true;
Streaming Rendering
SvelteKit supports streaming rendering, allowing the server to send the webpage framework first and then gradually transmit data asynchronously to enhance the initial page load speed and user experience.
In the
load function, enable streaming rendering by returning a Promise object when loading data.// +page.server.jsexport const load = async () => {return {post: fetch('/api/post').then(r => r.json()),comments: fetch('/api/comments').then(r => r.json())};};
On the page, use
{#await} to process streaming data:// +page.svelte<script>let { data } = $props();</script>{#await data.post}<p>Loading...</p>{:then post}<h1>{post.title}</h1>{/await}