数据加载
load 函数、服务端 fetch。
25 分钟
数据加载
静态页也要 在构建或请求时拿到数据。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 与瀑布流 更可控。