POST

用 Astro 混合渲染改造我的博客：画廊静态、博文 SSR

✍ heguolin ✎ 444 字 ☕ 预计阅读 1 分钟 Astro建站

这个站有两个看似矛盾的要求：158 张 2560×1440 的壁纸要秒开，后台发文章又要点「发布」立刻上线。前者是静态架构的主场，后者按传统做法得动态站。Astro 的混合渲染给了第三条路。

画廊：预渲染到底

画廊页在构建期生成，产物是纯 HTML。缩略图走 640px 的 WebP，固定宽高比占位，列表页的布局抖动是零。

树干测试：遮住内容只看导航，你也知道这是哪个站、自己在哪一页。

博文：按需 SSR

博文列表、正文、首页的最新博文都标记 prerender = false，请求时查一次 SQLite——个人博客的查询量级是微秒的，换来的就是即时发布的确定性。

改造只需三步：

  • astro.config.mjs 挂上 Node adapter（standalone 模式）
  • 需要即时性的页面逐页声明 prerender = false
  • 数据查询收敛到 src/lib/db.ts 一个入口
export const prerender = false;
const post = db.prepare('SELECT * FROM posts WHERE slug = ?').get(slug);

slug 为什么不能改

giscus 按 URL 路径绑定评论话题。发布后改 slug，等于把所有评论留在了一个不存在的地址上。所以后台把已发布文章的 slug 锁死。

评论