SvelteKit 静态网站中的三层数据时效性

你好！

静态网站托管速度快且成本低，但一旦部署，你的数据就会立即过时。本文展示了如何让一个使用 SvelteKit 构建的作品集网站，在仍以静态 HTML 形式部署到 GitHub Pages 的同时，从五个外部来源获取实时数据。

配置方式

该网站使用 SvelteKit 并搭配 adapter-static 适配器，在构建时将每个页面预渲染为 HTML。最终输出是一组 .html 文件组成的目录，并部署到 GitHub Pages。无需服务器、边缘函数或无服务器运行环境。

// svelte.config.js
import adapter from '@sveltejs/adapter-static';

const config = {
  kit: {
    adapter: adapter({
      fallback: '404.html',
      strict: false
    })
  }
};

fallback: '404.html' 这一行是关键所在。GitHub Pages 会为任何未匹配到预渲染页面的 URL 返回此文件，从而让 SvelteKit 的客户端路由接管后续操作。

三种数据新鲜度层级

并非所有数据都需要实时更新。该网站根据数据所需的新鲜程度，采用了三种不同的策略。

第一层级：部署时预渲染

首页通过一个 +page.server.ts 加载器从 北云 API 获取文章。由于页面是预渲染的，该加载器仅在构建时运行一次。

// src/routes/+page.server.ts
export async function load({ fetch }) {
  let northCloudArticles = [];
  try {
    northCloudArticles = await fetchNorthCloudFeed(fetch, 'pipeline', 6);
  } catch {
    // 首页可选显示此内容源
  }
  return { northCloudArticles };
}

这些数据被直接嵌入到 HTML 中。它只在你部署时更新，而不是在 API 数据变化时更新。对于首页展示用途而言，这种机制已经足够，即使文章来自昨天……