SvelteKit

单文件组件能写 UI，但 路由、SSR、环境变量、部署适配 需要框架。SvelteKit 是 Svelte 官方应用框架，角色类似 Next.js 核心 之于 React，或 Nuxt 之于 Vue。

学习目标

• 理解 src/routes 文件系统路由
• 区分 SSR、CSR、SSG 在 SvelteKit 中的配置
• 知道 adapter 如何对接静态托管与 Node

项目结构（要点）

src/
  routes/
    +page.svelte          → /
    tracks/
      +page.svelte        → /tracks
      [slug]/
        +page.svelte      → /tracks/:slug
        +page.server.js   → 服务端 load（可选）
  lib/                    → 共享模块
  app.html                → HTML 壳

• +page.svelte：页面 UI
• +page.js / +page.server.js：数据 load（下一课 sa-data 详述）
• +layout.svelte：嵌套布局，类似 Next layout.tsx

渲染模式

模式	配置思路	适用
SSR	默认，每请求渲染	个性化、SEO 动态页
SSG	prerender = true	文档、营销页
CSR	ssr = false	纯后台壳（少用）

与 Next.js SSG/SSR 概念平行：都是 构建/请求时生成 HTML，差异在 API 命名与 adapter。

Adapter 与部署

npm run build
# adapter-auto / adapter-static / adapter-node ...

Adapter	产物	平台
adapter-static	纯静态	Netlify、Cloudflare Pages
adapter-node	Node 服务	Docker、VPS
adapter-vercel	平台集成	Vercel

衔接 ft-deploy：先定部署形态，再选 adapter。

与 Next.js 速对照