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 速对照

	SvelteKit	Next.js App Router
路由	+page.svelte	page.tsx
服务端数据	+page.server.js	Server Component / fetch
布局	+layout.svelte	layout.tsx
全栈 API	+server.js	Route Handlers

本站不用 SvelteKit 跑 platform，但 文件路由 + load + adapter 的思维与 Next 可互译。

练习

• npm create svelte@latest 选 Skeleton 项目，浏览 src/routes
• 新增 /about 路由与一个 +layout.svelte
• 读 adapter 文档，写出「静态导出」需改哪两行配置

小结

SvelteKit = Svelte + 文件路由 + load + 可插拔部署。 下一课 Astro：内容站与群岛架构。