SuperAPI AI 工具集

sveltekit-data

前端与建站

查看项目

更新于 10-16 05:48

技能介绍

用途:本技能面向 SvelteKit 2 的数据层开发,帮助在 +page.js/+page.server.js 中加载数据、处理表单提交与配置页面渲染选项。

主要能力:

  1. 数据加载。区分 universal load(+page.js/+layout.js,SSR 与 hydration 各跑一次,可返回不可序列化值)与 server load(+page.server.js/+layout.server.js,始终服务端运行,可访问 cookies/locals/request)。两者可共存,server load 先执行,其返回值作为 universal load 的 data 参数。
  2. 跨组件数据。通过 $app/state 的 page.data 在祖先布局读取子页面数据,同级 key 后者覆盖。
  3. URL 数据。load 中可用 params、route.id、url;url.hash 在 SSR 阶段不可用。
  4. Cookies 与 Headers。仅 server load 可读写 cookies;setHeaders 在 universal load 的 SSR 阶段生效,浏览器内为 no-op,且同名 header 只能设一次。
  5. 错误与重定向。用 error(status,msg) 与 redirect(status,location) 抛出,不要自行 throw;redirect 不要包在 try 中。
  6. 流式响应。server load 返回未 await 的 Promise 可流式传输,需 JS 启用且非缓冲平台;流开始后不能再 setHeaders/redirect。
  7. 依赖追踪与重跑。通过 params、url、await parent()、fetch/depends 声明依赖,用 invalidate/invalidateAll 精确或全量失效;server load 的 fetch 不自动依赖 URL,需 depends(url)。
  8. 表单 actions。+page.server.js 导出 actions,支持默认与具名 action(?/name),用 fail(status,data) 返回校验错误,返回值进入 form prop。
  9. use:enhance。为 method="POST" 表单提供渐进增强,可自定义 SubmitFunction,配合 applyAction/deserialize。
  10. 页面选项。prerender、entries、ssr、csr、trailingSlash、config,子级覆盖父级。

使用方式:在对应路由文件中导出 load 函数、actions 对象或页面选项常量,并在组件中通过 data、form prop 与 $app/state、$app/navigation、$app/forms 的 API 使用。

适用场景:需要服务端数据获取、表单校验与提交、渐进增强、静态预渲染或 SPA 配置的 SvelteKit 项目。

限制:server load 返回值必须可序列化;load 应保持纯净,避免跨请求共享状态;依赖追踪仅对顶层 body 生效;form prop 仅本次响应有效;csr=false 与 HMR 不兼容;trailingSlash:'ignore' 影响 SEO;Lambda/Firebase 等平台会缓冲整页,不支持流式。