- 后端
【免费下载链接】zero
Zero is a web server to simplify web development.
本指南以 Zero 官方文档 docs/svelte/README.md 为主体，结合仓库中 Svelte 构建器（
zero-builder-svelte）、处理器（zero-handler-svelte）、路由匹配与集成测试等源码，系统讲解如何在 Zero 中用.svelte文件搭建服务端渲染页面：文件即路由、Props 注入、$动态路由、preload()服务端预取、跨端统一的fetch()以及<svelte:head>SEO 注入。读完本文，你将能够独立在 Zero 项目中开发完整、可搜索、带动态参数的 Svelte 应用，并理解其背后的构建与渲染流水线。
Zero 眼中的 Svelte：文件即页面
Zero是一个简化现代 Web 开发的服务器框架（见 docs/README.md）：把代码写进一个文件夹，Zero 自动完成路由、打包与转译。对于 Svelte 而言，规则非常简单——项目文件夹中的每一个.svelte文件都被当作一个独立页面，并且这些页面默认享受服务端渲染（Server Rendering），用户不会在 JS 加载完成前看到空白页。
例如，当你的组件位于./about.svelte时，它就会被暴露在http://<SERVER>/about这个地址上。文件路径到 URL 路径的映射由核心构建器完成，从源码看，buildManifest.js 会遍历所有文件，去掉扩展名、将index归一化为目录根路径，再把结果登记为页面的path。
| 文件位置 | 访问 URL | 说明 |
|---|---|---|
index.svelte | / | 首页 |
about.svelte | /about | 普通页面 |
user/index.svelte | /user | 目录型页面 |
user/$username.svelte | /user/luke | 动态参数页面 |
快速开始：五分钟跑通第一个 Svelte 页面
在任意空文件夹中创建index.svelte，写入以下代码：
<!-- index.svelte --> <script> let name = "World"; </script> <h1>Hello {name}</h1>然后在该文件夹中运行zero命令，并在浏览器打开http://localhost:3000/：
zero运行zero时会自动完成依赖安装（框架的安装与启动方式详见 README.md，全局安装命令为npm install -g zero）。针对每一个 Svelte 页面，Zero 会自动为你完成以下三件事：
- 转译与打包（Transpilation & Bundling）：基于 Parcel（仓库中封装为
zero-parcel-bundler，见 bundle.js，其配置项包含target: "browser"、开发模式下开启watch与hmr、生产模式下开启minify等）。 - 服务端渲染（Server Rendering）：页面 HTML 在服务端直接生成，避免 JS 加载前的白屏。
- 自动代码分割（Automatic Code Splitting）：每个页面按需构建、按需加载。
页面 Props：Zero 注入的会话与路由信息
顶层.svelte组件（即页面本身）会收到一组有用的 Props，组件只需在<script>块中声明即可消费：
<script> export let user; // 用户数据（对应 Express 的 req.user，来自会话） export let url; // { query, params } // 也可以接收 preload() 返回的数据 </script>这组 Props 并非魔法，而是处理器在渲染前显式构造的。在 handler.js 中可以看到：
let props = { user: req.user, url: { query: req.query, params: req.params } };也就是说，user直接取自 Express 请求对象上的req.user（登录后由会话机制填充，可参考 docs/nodejs/README.md 中的会话说明），url则是query（查询参数）与params（路径参数）的组合体。
动态路由：以$前缀定义 URL 参数
多数项目需要/user/luke、/user/anakin这类动态路由，其中luke、anakin是参数。Zero 原生支持此类路由：任何以$开头的文件或文件夹都被视为动态路由（该命名规则与路由匹配逻辑见 matchPath.js：当模式段以$开头且长度大于 1 时，将其余部分作为参数名捕获）。
例如创建./user/$username.svelte，浏览器访问/user/luke时，Zero 会将该请求交给$username.svelte，并把url.params设置为{ username: 'luke' }：
<!-- project/ └── user/ └── $username.svelte <- 本文件 --> <script> export let url; // { query, params } // 也可以接收 preload() 返回的数据 </script> <h1>Hello, {url.params.username}</h1>参数同样适用于文件夹名。比如要处理/user/luke/messages路由，可以用下面的目录结构：
project/ └── user/ └── $username/ └── index.svelte └── messages.svelteindex.svelte处理/user/:username路由；messages.svelte处理/user/:username/messages路由。
值得补充的是路由解析的优先级规则：当静态页面与动态页面同时命中时，Zero 会优先选择不含参数的那一个（getPreferredPath的实现见 matchPath.js）。此外，匹配器还支持把$path风格的路径转换成 Express 的:path风格路由，从而让req.params正确填充——这一步发生在 process.js。
preload()：服务端数据预取
你可以在 Svelte 页面旁边放置 API 路由（通常是.js或.py文件），然后在页面中通过fetch调用这些接口。为了让页面在渲染之前就拿到依赖的数据，Svelte 页面可以导出一个preload()函数。Zero 会先执行preload()，把返回结果连同其他 Props 一起传给 Svelte 渲染器——这意味着页面在服务端就带着数据完成渲染，而不是等客户端 JS 再拉取。
<script context="module"> export async function preload({ req, url, user }) { const res = await fetch(`/api/messages`); const messages = await res.json(); return { messages }; } </script> <script> // preload() 返回的 messages prop 会传到这里 export let messages; </script>preload()需要从<script context="module">中导出（该块只在模块层执行一次，不参与组件实例化）。需要注意以下几点：
- 运行位置：此方法在服务端运行；
- 序列化约束：
preload()返回的数据在服务端渲染时会被序列化，请确保返回的是普通对象（plain Object），不要使用Date、Map或Set等无法被 JSON 正确还原的类型。
preload收到一个对象参数，包含以下字段：
req：本次请求对应的标准 Expressreq对象；user：用户登录时，该对象包含你在认证时存储的会话数据（可参考 docs/nodejs/README.md 中的会话机制）；url：包含两个子键：query：请求携带的查询参数。例如访问/post?id=1，则url.query为{ id: 1 }；params：URL 参数对象，仅在页面属于动态路由时可用。例如/post/19/details（由./post/$postId/details.svelte处理），此时url.params为{ postId: 19 }。
从源码看，preload()的执行与结果合并发生在渲染之前：handler.js 先构造基础props，再调用preload({ req, ...props })，将返回对象与props合并，最后传给App.render(props)。App.render()返回的{ head, html, css }会被拼进最终 HTML 布局（handler.js）。
仓库中的集成测试也验证了这一流程：withPreloading.svelte 在context="module"中fetch("/obj.json")并把evens数组返回给页面；对应的测试 page.svelte.js 断言服务端渲染出的<p>文本为2,4,6。
fetch() API：服务端与客户端统一
fetch()允许你在服务端代码（如preload()）和客户端代码中发起网络请求，而且两端行为一致。Zero 对服务端环境注入了全局fetch：在 process.js 的generateFetch中，相对路径（以/开头）会被解析到当前服务地址，从而保证服务端也能用与浏览器相同的方式请求同源 API。
如果需要携带 Cookie 等凭据发起fetch请求，请将请求的credentials设置为"include"：
fetch(url, { credentials: "include" });在服务端执行时，credentials: "include"还会触发实现中的特殊处理：generateFetch会把当前请求的req.headers透传给上游请求（见 process.js），从而保留登录态、Cookie 等上下文。仓库测试 fetchWithCredentials.js 对此场景有直接覆盖：该接口以credentials: 'include'请求/api/user并透传返回结果。
svelte:head：填充页面头部实现 SEO
为了让搜索引擎正确收录页面，你应该设置<title>、<meta>等头部标签。Svelte 提供了<svelte:head>元素，Zero 已为你接好，直接使用即可：
<svelte:head> <title>Page Title</title> </svelte:head> <h1>Hello!</h1>注意<svelte:head>标签：Zero 会把其中声明的 meta 标签注入到页面的 HTML。底层实现见 handler.js：App.render(props)返回的head字符串被原样放进<head>区域（${head}），随后拼入完整的<!doctype html>布局。仓库测试 withHead.svelte 与 page.svelte.js 验证了head title的渲染结果为Page Title。
底层构建与渲染流水线（源码级）
把上面的功能串起来，一个 Svelte 页面从请求到响应的完整流水线如下：
- 文件识别：fileToPageType.js 将
.svelte扩展名映射为页面类型page:svelte； - 构建映射：builders-map/index.js 将
page:svelte关联到zero-builder-svelte，其依赖声明为svelte: ^3.15.0（见 package.json）； - 浏览器打包：bundle.js 生成一个入口文件：从
<div id="app">读取服务端注入的#props模板中的 JSON，然后new App({ target, props, hydrate: true })以hydrate 模式挂载，实现服务端 HTML 与客户端状态的无缝衔接； - 处理器映射：handlers-map/index.js 将
page:svelte关联到zero-handler-svelte，其处理器在独立进程中通过zero-process包装执行（process.js），并获得全局fetch、__DIRNAME、__FILENAME等注入变量（process/index.js）； - 渲染响应：handler.js 执行
preload()→App.render(props)→ 拼装含head、css链接与客户端bundle.js脚本的完整 HTML 并返回。
另外，构建期生成的信息（.zero/zero-builds/下的产物路径）由核心路由缓存与复用（router/index.js）；开发模式下文件变更会触发对应页面重建。测试目录 test/www/svelte/ 中提供了withQuery.svelte、nested.svelte（组件间嵌套）、clicker.svelte（事件交互）、withStyle.svelte（SCSS 样式导入）等可直接运行的页面示例，examples/tailwindcss/svelte.svelte 还展示了在 Svelte 页面中直接编写 Tailwind CSS 的用法。这些都是对照本文各章节验证行为的现成素材。
小结
在 Zero 中开发 Svelte 应用的核心心智模型是"文件即路由、零配置即服务端渲染"：用$前缀表达动态参数，用preload()在服务端预取数据，用统一的fetch()打通前后端数据通路，用<svelte:head>治理 SEO 元信息。配合 Parcel 的自动打包、代码分割与 HMR，你可以专注于组件本身，而把路由、转译、渲染这些繁琐工程问题交给 Zero。
- 后端
【免费下载链接】zero
Zero is a web server to simplify web development.
相关推荐
Serde 序列化框架快速上手：从 crates-io 快速入门到 Rust 源码级原理
Serde 序列化框架快速上手：从 crates io 快速入门到 Rust 源码级原理 Serde 是 Rust 生态中最核心的通用序列化/反序列化框架，本文
序列化Go-Zero 框架快速上手指南
Go Zero 框架快速上手指南 Go Zero 是一个基于 Go 语言的微服务框架，它集成了丰富的工程实践，旨在确保高流量服务的稳定性，包括弹性设计、链式超时
后端RPC框架Web框架微服务API网关服务注册发现代码生成schedule：面向人类的 Python 定时任务库——从快速上手到源码级原理
schedule：面向人类的 Python 定时任务库——从快速上手到源码级原理 导读 本文围绕开源项目 schedule （"Python job sched
任务调度后端
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
