SvelteKit 最新中文文档教程（17）—— 仅服务端模块和快照

前言

Svelte，一个语法简洁、入门容易，面向未来的前端框架。

从 Svelte 诞生之初，就备受开发者的喜爱，根据统计，从 2019 年到 2024 年，连续 6 年一直是开发者最感兴趣的前端框架 No.1：

Svelte 以其独特的编译时优化机制著称，具有轻量级、高性能、易上手等特性，非常适合构建轻量级 Web 项目。

为了帮助大家学习 Svelte，我同时搭建了 Svelte 最新的中文文档站点。

如果需要进阶学习，也可以入手我的小册《Svelte 开发指南》，语法篇、实战篇、原理篇三大篇章带你系统掌握 Svelte！

欢迎围观我的“网页版朋友圈”、加入“冴羽·成长陪伴社群”，踏上“前端大佬成长之路”。

仅服务端模块

SvelteKit 会像一个好朋友一样，保守您的秘密。在同一个代码仓库中编写后端和前端代码时，很容易不小心将敏感数据（例如包含 API 密钥的环境变量）导入到前端代码中。SvelteKit 提供了一种完全防止这种情况发生的方法：仅服务端模块（server-only modules）。

私有环境变量

$env/static/private 和 $env/dynamic/private 模块只能导入到仅在服务端上运行的模块中，例如 hooks.server.js 或 +page.server.js。

仅服务端工具

$app/server 模块包含一个 read 函数，用于从文件系统读取资源，同样只能被服务端运行的代码导入。

您的模块

您可以通过两种方式使您的模块成为仅服务端模块：

• 在文件名中添加 .server，例如 secrets.server.js
• 将它们放在 $lib/server 中，例如 $lib/server/secrets.js

工作原理

任何时候，当您有公开的代码，导入仅服务端代码时（无论是直接还是间接）...

// @errors: 7005
/// file: $lib/server/secrets.js
export const atlantisCoordinates = [
    /* 已编辑 */
];

// @errors: 2307 7006 7005
/// file: src/routes/utils.js
export { atlantisCoordinates } from '$lib/server/secrets.js';

export const add = (a, b) => a + b;

/// file: src/routes/+page.svelte
<script>
    import { add } from './utils.js';
</script>

...SvelteKit 将报错：

Cannot import $lib/server/secrets.js into public-facing code:
- src/routes/+page.svelte
  - src/routes/utils.js
    - $lib/server/secrets.js

尽管公开代码 — src/routes/+page.svelte — 只使用了 add 导出而没有使用秘密的 atlantisCoordinates 导出，秘密代码也可能最终出现在浏览器下载的 JavaScript 中，因此这个导入链被认为是不安全的。

此功能也适用于动态导入，甚至是像 await import(`./${foo}.js`) 这样的插值导入，只有一个小注意点：在开发过程中，如果公开代码和仅服务端模块之间存在两个或更多的动态导入，则在第一次加载代码时不会检测到非法导入。

[!NOTE] 像 Vitest 这样的单元测试框架不区分仅服务端代码和公开代码。因此，当运行测试时，非法导入检测会被禁用，这由 process.env.TEST === 'true' 决定。

进一步阅读

• 教程：环境变量

快照

临时的 DOM 状态 — 比如侧边栏的滚动位置、<input> 元素的内容等 — 在从一个页面导航到另一个页面时会被丢弃。

例如，如果用户填写了一个表单但在提交之前离开并返回，或者用户刷新页面，他们填写的值将会丢失。在需要保留这些输入的情况下，您可以创建一个 DOM 状态的快照，当用户返回时可以恢复这个状态。

要实现这一点，从 +page.svelte 或 +layout.svelte 中导出一个带有 capture 和 restore 方法的 snapshot 对象：

<!--- file: +page.svelte --->
<script>
  let comment = $state('');

  /** @type {import('./$types').Snapshot<string>} */
  export const snapshot = {
    capture: () => comment,
    restore: (value) => comment = value
  };
</script>

<form method="POST">
  <label for="comment">评论</label>
  <textarea id="comment" bind:value={comment} />
  <button>发表评论</button>
</form>

当您离开这个页面时，capture 函数会在页面更新之前立即被调用，返回的值会与浏览器历史栈中的当前记录关联。如果您返回此页面，restore 函数会在页面更新后立即被调用，并传入存储的值。

数据必须是可以序列化为 JSON 的，这样它才能被保存到 sessionStorage 中。这样就可以在页面重新加载时，或者用户从其他网站返回时恢复状态。

[!NOTE] 避免从 capture 返回非常大的对象 — 一旦被捕获，对象将在会话期间保留在内存中，在极端情况下可能会因太大而无法保存到 sessionStorage 中。

Svelte 中文文档

点击查看中文文档：

1. SvelteKit 仅服务端模块
2. SvelteKit 快照

系统学习 Svelte，欢迎入手小册《Svelte 开发指南》。语法篇、实战篇、原理篇三大篇章带你系统掌握 Svelte！

此外我还写过 JavaScript 系列、TypeScript 系列、React 系列、Next.js 系列、冴羽答读者问等 14 个系列文章， 全系列文章目录：https://github.com/mqyqingfeng/Blog

欢迎围观我的“网页版朋友圈”、加入“冴羽·成长陪伴社群”，踏上“前端大佬成长之路”。