古法编程

使用 SvelteKit 构建高性能全栈 Web 应用

解决现代 Web 开发中 DX（开发者体验）与运行时性能的矛盾：通过 SvelteKit 的编译时响应式模型和灵活的渲染模式，快速构建支持服务端渲染（SSR）和静态生成（SSG）的全栈应用。

为什么需要这个技能

传统的 SPA（单页应用）往往面临 SEO 差和首屏加载慢的问题，而许多全栈框架在运行时引入了巨大的 JavaScript 开销。

SvelteKit 依托 Svelte 的编译特性，在构建阶段将代码转化为高效的原生 JS，实现了“零运行时开销”。它将路由、数据加载、服务端 API 和表单处理集成在一个统一的框架中，让开发者能够根据具体页面的需求，在 SSR、SSG 和 CSR 之间自由切换。

适用场景

  • 从零构建一个需要良好 SEO 和快速首屏加载的全栈 Web 应用。
  • 需要针对不同路由实现精细化的渲染控制（如文档页用 SSG，个人面板用 SSR）。
  • 将原有的 SPA 迁移到具备服务端能力（API Routes）的框架。
  • 构建需要高度类型安全（TypeScript）且包含复杂表单交互的后台管理系统。

核心工作流

1. 快速起步

使用官方脚手架初始化项目，建议选择 Skeleton project + TypeScript。

npm create svelte@latest my-app
cd my-app
npm install
npm run dev

2. 基于文件的路由与数据加载

SvelteKit 通过 src/routes/ 目录结构定义 URL。利用 +page.server.ts 处理服务端数据加载，确保敏感逻辑不泄露给客户端。

// src/routes/blog/[slug]/+page.server.ts
import { error } from '@sveltejs/kit';
import type { PageServerLoad } from './$types';

export const load: PageServerLoad = async ({ params, fetch }) => {
  const post = await fetch(`/api/posts/${params.slug}`).then(r => r.json());
  if (!post) error(404, '文章不存在');
  return { post };
};

3. 实现服务端 API 与表单交互

使用 +server.ts 定义 REST 接口，并利用 Form Actions 处理数据提交，无需手动编写客户端 fetch 即可实现渐进增强。

// src/routes/contact/+page.server.ts
export const actions = {
  default: async ({ request }) => {
    const data = await request.formData();
    const email = data.get('email');
    if (!email) return fail(400, { missing: true });
    await sendEmail(String(email));
    redirect(303, '/thank-you');
  }
};

4. 灵活配置渲染模式

在 +page.ts 中通过配置项控制页面的渲染行为：

  • export const prerender = true; → 静态生成（SSG）。
  • export const ssr = true; → 服务端渲染（SSR）。
  • export const csr = false; → 禁用客户端水合（极致性能）。

下载和安装

下载 sveltekit 中文版 Skill ZIP

解压后将目录放入你的 AI 工具 skills 文件夹，重启工具后即可使用。具体路径参考内附的 USAGE.zh.md。

你可能还需要

暂无推荐