注意：目前 Makers 对 SvelteKit 版本的支持为 2.4+，最低版本为 2.4.0。
一、核心特点
SvelteKit 提供高性能的渲染能力、简化的开发流程和灵活的应用架构，适用于构建博客、营销落地页、文档网站等对性能要求较高的中小型 Web 应用。
·无缝集成 Svelte：利用 Svelte 的编译优势，在构建阶段生成高效的原生 JavaScript，无需虚拟 DOM，提供极高的运行时性能与简洁的开发体验。
·灵活的渲染模式：支持服务端渲染（SSR）、预渲染（Prerender）和客户端渲染（CSR），并可按页面选择合适的渲染策略。
·基于文件系统的路由：通过约定式目录结构自动生成路由，支持动态路由与嵌套布局，无需手动维护额外的路由配置。
·统一的数据加载机制：使用统一的 load 函数进行数据加载，支持服务器端与客户端环境。
·内置增强能力：提供表单增强、流式渲染、错误处理和应用钩子等能力，可根据需要逐步扩展应用。
二、快速开始
在 EdgeOne Makers 平台上快速部署 SvelteKit 的项目，可以通过以下方式：
·通过 Git 仓库导入 SvelteKit 项目
·从 Makers 模板库选择 SvelteKit 模板进行部署
了解 SvelteKit 在 Makers 的部署表现，可以点击下方的示例模板：
三、Makers 对 SvelteKit 的支持
下表是 Makers 目前支持 SvelteKit 的关键特性。平台也会尽早支持更多特性，但实验性功能可能尚未完全稳定。
| SvelteKit 特性 | 支持情况 |
| Server-Side Rendering (SSR) | ✓ |
| Static Site Generation (SSG) | ✓ |
| Prerender | ✓ |
| Filesystem-based Router | ✓ |
| Streaming With Promises | ✓ |
| Form Actions | ✓ |
| Hooks | ✓ |
| Observability | 暂不支持 |
四、在 Makers 部署 SvelteKit 项目
SvelteKit 通过适配器系统支持部署到不同平台。适配器是将构建产物转换为目标平台所需格式的插件。Makers 提供了适配器 @edgeone/sveltekit，用于生成 Makers 部署产物。配合 Makers 的脚手架工具，可快速将 SvelteKit 项目部署到 Makers 平台。适配器源代码已开源，欢迎访问 sveltekit-adapter 仓库查看源码、提交 Issue 或参与贡献。
要在 Makers 部署 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 部署
也可以安装 Makers 的脚手架工具，详细安装和使用方法请参考 EdgeOne CLI。配置完成后，使用 edgeone makers 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 适配器将全站构建为静态网站部署到 Makers。
// +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}