SvelteKit中load()函数使用疑问：预渲染后为何仍重复调用API？

一、预渲染HTML的使用时机 #

预渲染生成的mypage.html只在**首次访问（非应用内导航）**场景生效：

• 用户直接输入页面URL、刷新页面时，服务器会直接返回预渲染好的HTML，无需实时调用API生成内容，首屏加载速度更快，也利于搜索引擎爬虫抓取。
• 应用内导航是SvelteKit客户端路由在工作，默认会触发客户端侧的load()执行，所以你会看到网络面板里的API调用。

二、应用内导航避免重复API调用与加载动画的方法 #

默认情况下，应用内导航会重新执行load()，但你可以通过以下方式优化：

• 缓存静态数据：如果数据构建后不会变化，在fetch时添加cache: 'force-cache'选项，让客户端复用缓存的响应，无需重复调用API：

  export const load = async ({ fetch }) => {
    const res = await fetch('https://your-api.com/data', { cache: 'force-cache' });
    return { data: await res.json() };
  };
  

• 标记静态页面：如果页面完全静态，在+page.js中添加export const prerender = true;，同时配合export const immutable = true;，告诉SvelteKit该页面内容不会改变，客户端导航时直接复用预渲染数据。
• 只要load()能快速获取数据（缓存命中或本地复用），就不会出现加载动画——SvelteKit会直接渲染新页面，无需等待API响应。

三、服务端与客户端双重执行load()的意义 #

这不是“兼顾”，而是针对不同场景的互补设计：

• 服务端侧执行（含预渲染）：解决首屏性能和SEO问题。静态数据预渲染后直接返回HTML，动态数据（比如实时榜单）则在用户首次访问时由服务端调用API生成页面，用户不用等客户端发起请求再渲染。
• 客户端侧执行：应用内导航时，客户端直接调用API获取数据，无需重新加载整个页面，交互更流畅；另外，针对用户专属数据（比如个人收藏状态），服务端渲染时无法获取客户端的用户身份信息，客户端执行load()就能拿到正确的个性化数据，同时不影响首屏公共内容的展示。

简单来说，服务端渲染负责“首屏快、能被爬”，客户端执行负责“交互顺、数据新/个性化”，两者结合覆盖了不同访问场景的需求。

内容的提问来源于stack exchange，提问作者Alexmedkex