SvelteKit 静态与服务端渲染

Q: SvelteKit 静态与服务端渲染 的最佳实践有哪些？

SvelteKit 静态与服务端渲染 的最佳实践包括：用 runes（$state/$derived）— 显式响应式、更好 DevTools、无魔法；每页自适应渲染 — 一应用中博客预渲染、仪表板 SSR、管理 SPA；用 Form actions 而非 API 路由 — 类型安全、CSRF 保护、渐进增强。其中首条「用 runes（$state/$derived）— 显式响应式、更好 DevTools、无魔法」应在项目初始化时就落地，避免后期返工。

SvelteKit 搭配自适应渲染（每页 SSG/SSR/SPA）、Svelte 5 runes 和零运行时 CSS。

静态站点简单

技术栈组成

FrameworkSvelteKit 2 + Svelte 5

RenderingAdaptive (SSG/SSR/SPA)

StylingSvelte scoped CSS

DataSvelteKit load functions

DeployAdapter-static / Adapter-node

为什么

Svelte 编译为原生 JS — 无虚拟 DOM，包比 React 小 10 倍。SvelteKit 让每页通过一个配置选择 SSG（博客）、SSR（仪表板）或 SPA（管理）。

Runes（$state、$derived）让响应式显式可调试。

何时使用

选择 SvelteKit 用于内容 + 应用混合（博客 + 仪表板一站）、性能关键落地页和想要最小 JS 的小团队。避免设计系统（React 生态更大）或巨型 SPA。

如何做

1. 脚手架 — npm create svelte@latest myapp，选 "SvelteKit minimal" 2. Svelte 5 runes — $state、$derived、$effect 替代 let/export let 3. load 函数 — +page.ts 导出 async function load({ fetch }) 获取数据 4. 自适应渲染 — +page.ts 中 export const prerender = true 做 SSG 5. 布局 — +layout.svelte 共享导航，+layout.ts 共享 load 6. 表单 — +page.server.ts 中 form actions，use:enhance 渐进增强 7. 静态导出 — adapter-static 配 prerender entries，fallback: 'spa' 选项 8. 部署 — npm run build，输出到 Netlify/Vercel/Cloudflare/GitHub Pages

示例

// src/routes/blog/[slug]/+page.ts — load 函数（SSG） import type { PageLoad } from "./$types"; export const prerender = true; // 构建时生成 export const load: PageLoad = async ({ params, fetch }) => { const post = await fetch(`/api/posts/${params.slug}`).then((r) => r.json()); return { post }; }; // src/routes/blog/[slug]/+page.svelte — Svelte 5 runes <script lang="ts"> let { data } = $props(); let liked = $state(false); let label = $derived(liked ? "已赞 ❤" : "点赞"); </script> <h1>{data.post.title}</h1> <article>{@html data.post.content}</article> <button onclick={() => (liked = !liked)}>{label}</button> <style> /* 作用域 CSS — 零运行时，编译为单个 class */ h1 { color: #1a1a1a; } button { padding: 0.5rem 1rem; border-radius: 0.5rem; } </style> // src/routes/admin/+page.ts — SPA（仅客户端） export const prerender = false; export const ssr = false; // 纯 SPA 页面 // svelte.config.js — 自适应静态导出 import adapter from "@sveltejs/adapter-static"; export default { kit: { adapter: adapter({ fallback: "index.html" }), // SPA 回退 prerender: { entries: ["*"] }, }, };

常见问题

⚠prerender + 动态数据 — load 用 request.url 构建失败，仅用 params
⚠Runes 仅在 .svelte — .ts 文件中 $state 报错，共享状态用 store
⚠adapter-static 需所有路由预渲染 — SPA 路由设 fallback
⚠Form action 重定向 — 必须 throw redirect(303, '/path')，非 return

最佳实践

✓用 runes（$state/$derived）— 显式响应式、更好 DevTools、无魔法
✓每页自适应渲染 — 一应用中博客预渲染、仪表板 SSR、管理 SPA
✓用 Form actions 而非 API 路由 — 类型安全、CSRF 保护、渐进增强
✓作用域 CSS 优于全局 — 编译消除、无运行时、无命名冲突

常见问题解答

什么是SvelteKit 静态与服务端渲染？适合做什么项目？

SvelteKit 搭配自适应渲染（每页 SSG/SSR/SPA）、Svelte 5 runes 和零运行时 CSS。它通过分层组合提供端到端类型安全与开箱即用的部署体验，适合从 MVP 到生产 SaaS 的快速迭代。

如何用SvelteKit 静态与服务端渲染在 10 分钟内跑通一个 demo？

两步起步：① 脚手架 — npm create svelte@latest myapp，选 "SvelteKit minimal"；② Svelte 5 runes — $state、$derived、$effect 替代 let/export let。先跑通本地 dev server，再接一个真实数据源验证端到端链路。