数据加载

静态页也要 在构建或请求时拿到数据。SvelteKit 的 load、Astro frontmatter 里的 fetch、Next 的 Server Component fetch 解决同一类问题：在进浏览器之前完成 IO。本节对齐概念，便于你在多框架项目里读代码。

学习目标

• 读懂 SvelteKit +page.server.js 的 load 导出
• 在 Astro 页面顶层 await fetch 或读 content collection
• 对照 next-data 与 Java 后端 API

SvelteKit load

// src/routes/tracks/[slug]/+page.server.js
export async function load({ params, fetch }) {
  const res = await fetch(`https://api.example.com/tracks/${params.slug}`);
  if (!res.ok) throw error(404, "Not found");
  return { track: await res.json() };
}

<!-- +page.svelte -->
<script>
  export let data;
</script>
<h1>{data.track.title}</h1>

• +page.server.js：仅服务端运行，可安全用密钥
• fetch 参数：继承 cookie，便于 BFF
• 错误：error() / redirect() 辅助函数

与 Next async function Page() 内 fetch 类似；差异是 显式 load 文件 与 返回 data prop。

Astro 数据

---
const res = await fetch("https://api.example.com/tracks");
const tracks = await res.json();
---
<ul>
  {tracks.map((t) => <li>{t.title}</li>)}
</ul>

构建时 SSG：build 阶段 fetch 一次；若 API 需鉴权，用环境变量 import.meta.env。内容型数据优先 Content Collections，避免 build 耦合在线 API——适合 mirror html-css-essentials 式讲义。

与本站架构

Astro/SvelteKit (可选 BFF)
        ↓ fetch
Spring Boot backend (:8080)   ← 业务真相源
        ↓
      MySQL

platform（Next）同样 Server Component fetch backend；换 Astro 文档站时，契约仍是 REST/JSON，不是把 SQL 写进前端。与 react-essentials 客户端 useEffect fetch 对比：首屏 SEO 与瀑布流 更可控。

环境变量与秘密

框架	服务端秘密	暴露给浏览器
SvelteKit	$env/static/private	仅 PUBLIC_ 前缀
Astro	import.meta.env 非 PUBLIC	PUBLIC_*
Next	无 NEXT_PUBLIC_ 即服务端	NEXT_PUBLIC_

禁止把数据库 URL 放进客户端 bundle——与 frontend-toolchain-essentials CI 秘密管理一致。

练习

• 在 SvelteKit 写 load，对 404 slug 返回 error 页
• 在 Astro 用 Content Collection 渲染两节 draft 标题列表
• 对照 Next 课时页：数据从 MySQL 经 Java API 到 RSC 的路径

小结

load / frontmatter fetch = 服务端先取数，再渲染 HTML；秘密与缓存策略跟 Next 同纪律。 下一课样式与组件边界。