文档反馈官招募中，报名立赚积分兑换代金券！> HOT
文档中心>边缘安全加速平台 EO>Pages>框架指南>全栈>SvelteKit

SvelteKit

最近更新时间：2026-01-09 17:47:32

我的收藏

本页目录：

SvelteKit 是 Svelte 官方推出的 Web 应用框架，提供基于文件系统的路由、服务器端渲染（SSR）、静态站点生成（SSG）等开箱即用的能力，帮助开发者构建高性能的现代 Web 应用。
注意：
目前 Pages 对 SvelteKit 版本的支持为 2.4+，最低版本为 2.4.0。

核心特点

SvelteKit 提供高性能的渲染能力、简化的开发流程和灵活的应用架构，适用于构建博客、营销落地页、文档网站等对性能要求较高的中小型 Web 应用。
无缝集成 Svelte：利用 Svelte 的编译优势，在构建阶段生成高效的原生 JavaScript，无需虚拟 DOM，提供极高的运行时性能与简洁的开发体验。
灵活的渲染模式：支持服务端渲染（SSR）、预渲染（Prerender）和客户端渲染（CSR），并可按页面选择合适的渲染策略。
基于文件系统的路由：通过约定式目录结构自动生成路由，支持动态路由与嵌套布局，无需手动维护额外的路由配置。
统一的数据加载机制：使用统一的 load 函数进行数据加载，支持服务器端与客户端环境。
内置增强能力：提供表单增强、流式渲染、错误处理和应用钩子等能力，可根据需要逐步扩展应用。

快速开始

在 EdgeOne Pages 上快速部署 SvelteKit 的项目，可以通过以下方式：
通过 Git 仓库导入 SvelteKit 项目
从 Pages 模板库选择 SvelteKit 模板进行部署
了解 SvelteKit 在 Pages 的部署表现，可以点击下方的示例模板：


Pages 对 SvelteKit 的支持

下表是 Pages 目前支持 SvelteKit 的关键特性。平台也会尽早支持更多特性，但实验性功能可能尚未完全稳定。
SvelteKit 特性
支持情况
Server-Side Rendering (SSR)
✓
Static Site Generation (SSG)
✓
Prerender
✓
Filesystem-based Router
✓
Streaming With Promises
✓
Form Actions
✓
Hooks
✓
Observability
暂不支持

在 Pages 部署 SvelteKit 项目

SvelteKit 通过适配器系统支持部署到不同平台。适配器是将构建产物转换为目标平台所需格式的插件。Pages 提供了官方适配器 @edgeone/sveltekit，用于生成 Pages 部署产物。配合 Pages 的脚手架工具，可快速将 SvelteKit 项目部署到 Pages 平台。
要在 Pages 部署 SvelteKit 项目，可以参考以下操作步骤。

1. 安装适配器

使用 npm 安装适配器。
npm install @edgeone/sveltekit

2. 配置 svelte.config.js

修改配置文件 svelte.config.js，引入并使用适配器@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 adapter
    adapter: adapter()
  }
};

export default config;

3. 部署项目

Git 连接部署
集成好适配器后，您可以将项目提交到 GitHub，GitLab 等平台，然后使用我们的 导入 Git 仓库。
CLI 部署
也可以安装 Pages 的脚手架工具，详细安装和使用方法请参考 EdgeOne CLI。配置完成后，使用 edgeone pages deploy 命令部署项目。在部署过程中，CLI 会先自动构建项目，然后将构建产物上传并发布。
注意：
EdgeOne CLI 版本要求 ≥ 1.2.0，部署前请先检查版本，避免部署失败。

服务端渲染（SSR）

默认情况下，SvelteKit 采用服务端渲染（SSR），在服务端生成 HTML 并发送到客户端。
通过在以下文件中配置渲染参数，可修改默认行为：
+page.js / +page.server.js - 页面级配置。
+layout.js / +layout.server.js - 布局级配置。
例如，设置 ssr = false 可切换为客户端渲染（CSR），服务端将返回空白页面框架，由客户端 JavaScript 完成渲染。
// +page.js
export const ssr = false;

预渲染（Prerender）

SvelteKit 支持为指定页面启用预渲染，在构建时生成静态 HTML 文件，其他页面保持动态渲染。若整个应用都适合预渲染，可使用 @sveltejs/adapter-static 适配器将全站构建为静态网站部署到 Pages。
// +page.js/+page.server.js
export const prerender = true;

流式渲染

SvelteKit 支持流式渲染，允许服务端先发送页面框架，再逐步传输异步数据，提升首屏加载速度和用户体验。
在 load 函数中加载数据时，返回 Promise 对象即可启用流式渲染：
// +page.server.js
export const load = async () => {
  return {
    post: fetch('/api/post').then(r => r.json()),
    comments: fetch('/api/comments').then(r => r.json())
  };
};
在页面中使用 {#await} 处理流式数据：
// +page.svelte
<script>
  let { data } = $props();
</script>

{#await data.post}
  <p>Loading...</p>
{:then post}
  <h1>{post.title}</h1>
{/await}

中国站
目录