SvelteKit
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 adapteradapter: adapter()}};export default config;
3. 部署项目
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.jsexport const ssr = false;
预渲染（Prerender）
SvelteKit 支持为指定页面启用预渲染，在构建时生成静态 HTML 文件，其他页面保持动态渲染。若整个应用都适合预渲染，可使用
@sveltejs/adapter-static 适配器将全站构建为静态网站部署到 Pages。// +page.js/+page.server.jsexport const prerender = true;
流式渲染
SvelteKit 支持流式渲染，允许服务端先发送页面框架，再逐步传输异步数据，提升首屏加载速度和用户体验。
在
load 函数中加载数据时，返回 Promise 对象即可启用流式渲染：// +page.server.jsexport 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}