Svelte JS 学习笔记（四）：进阶Svelte Kit

SyYhunfhds2025/11/25大约 4 分钟

阅读路线-备忘录

【Gemini】阅读路线

这篇笔记整理得非常详尽！但对于你的 Go + Svelte (SPA/Wails) 技术栈来说，这部分内容是“减法”做得最狠的地方。

SvelteKit 的进阶功能大部分是为了解决 “服务端渲染 (SSR) 的复杂性” 和 “Node.js 中间件逻辑” 而存在的。而你的后端是 Go，中间件在 Gin 里，所以 SvelteKit 的这些功能对你来说大多是屠龙技。

咱们继续拿着 “Go 后端开发者” 的手术刀，把这块内容切个干净：

判断： ❌ 完全不需要

Hooks (Handle, RequestEvent): 这是 SvelteKit 自带的 Node.js 服务器中间件。用来拦截请求、修改 Header、验证 Session。
Go 视角： 这就是 Gin 的 Middleware (c.Next(), c.Abort())。
结论： 你有 Gin 了。所有的鉴权、日志、跨域，全在 Go 里做。SvelteKit 这一章你可以整章撕掉。

判断： ✅ 必须掌握 (只需两行代码)

这一章决定了 SvelteKit 是作为一个“网站服务器”运行，还是作为一个“纯前端静态资源包”运行。

SSR: 重点！
- 默认是 true。
- 你的操作： 必须设为 false。
- 代码： export const ssr = false; (在 +layout.js 或 +page.js 里)。
- 解释： 这句话告诉 SvelteKit：“别在服务器搞 HTML 拼接了，直接生成一个空的 HTML壳子，把 JS 扔给浏览器去跑。” 这是 Wails 和 SPA 模式 的基石。
CSR: 客户端渲染。默认 true，保持不动。
预渲染 (Prerender):
- 如果你做的是静态官网（比如个人博客），设为 true。它会在构建时把所有 HTML 生成好。
- 做管理系统/Wails，通常不需要强制预渲染所有页面，保持默认即可（配合 Adapter Static 使用）。
附加斜杠 (TrailingSlash):
- 决定 URL 是 /about 还是 /about/。
- Go 视角： 就像 Gin 里的 Router.RedirectTrailingSlash 配置。保持默认 never 即可。

判断： 🟡 很有用 (组织文件结构)

虽然咱们不用服务端加载数据，但这套文件系统的路由逻辑，对组织前端代码结构非常有帮助。

路由组 (Route Groups) —— 重点推荐
- 语法： src/routes/(app)/dashboard 和 src/routes/(auth)/login。
- 作用： 括号里的名字不会出现在 URL 里。
- 场景： 你的 EMS 系统里，登录页 (login) 不需要侧边栏，而管理页 (dashboard) 需要侧边栏。你可以用路由组给它们分别套上不同的 +layout.svelte。这是前端架构整洁的关键。
Restful 参数 (Rest Parameters): [...slug]
- 作用： 捕获所有路径。
- 场景： 做 404 页面，或者做“文件浏览器”这种层级不确定的路由。
可选参数 和 参数匹配: 偶尔用得到，扫一眼即可。
跳出布局 (Breaking out of Layouts): 当你需要某个子页面不继承父页面的 Layout 时使用（比如全屏大图模式）。

判断： 📉 低优先级

链接配置 (Link Options):
- 比如 data-sveltekit-preload-data="hover"。鼠标悬停时预加载数据。
- Wails 视角： 本地应用速度极快，不需要这种微优化。
高级加载 (Advanced Loading):
- 既然我们决定绕过 load 函数，直接用 fetch，这部分关于 parent data (父级数据) 和 invalidate (失效) 的复杂逻辑，基本可以跳过。
- 唯一例外： 如果你用了 SvelteKit 的路由，想在 URL 变动时重置某些状态，可能需要了解一下 afterNavigate (在生命周期里)。

判断： ⚠️ 小心使用

$env/static/private & $env/dynamic/private:
- 私有变量（如数据库密码）。
- Go 视角： 这些变量应该在 Gin 后端 读取。绝对不要把私钥放在前端代码里，即使 SvelteKit 说它是 Private 的（因为在 SPA 模式下，并没有 Node 服务器帮你保守秘密）。
$env/static/public:
- 公开变量（以 PUBLIC_ 开头）。
- 场景： PUBLIC_API_URL = "http://localhost:8080"。
- 作用： 在构建时把 API 地址注入到前端代码里。这个很有用，方便你切换开发环境和生产环境。

对于 Go + Wails/SPA 开发者，进阶 SvelteKit 只需要看这就行了：

剩下的 Hooks、Private Env、Link Options…… 统统扔进垃圾桶。它们是留给那些没有 Go 后端、只能用 Node.js 苦哈哈写全栈的前端工程师用的。你有 Gin，你不需要它们。