这个笔记记录一下我的博客在页面渲染策略上的一个核心调整：既然项目本身更适合 SSG，那么就不应该再把主页面做成整页 client:only。

最开始我的博客虽然使用了 Astro，但是几个主页面依然是整页 client:only="react" 的方式在跑。

这种写法最大的问题是：

• 首屏 HTML 基本是空的
• 页面必须等 JS 下载并执行后才真正显示
• 用户需要等待 React 执行完脚本渲染好整个页面
• Astro 的静态输出优势被直接削弱

1. 为什么这个项目更适合 SSG

这个站点本质上是一个博客 / 作品集 / 知识库站点。

它的特点比较明确：

• 页面内容大部分是静态内容
• 不依赖登录态
• 不需要按请求实时生成 HTML
• 更希望首屏快、部署简单、CDN 命中高

因此它更适合 SSG (Static Site Generation)，也就是在构建阶段直接生成 HTML。

选定这个方向之后，优化原则就很清楚了：

1. 尽量在构建阶段把内容提前产出来
2. 只把真正需要交互的部分留给客户端
3. 不要让“页面能不能显示”依赖 JavaScript 启动

2. 页面级 client:only 的问题

页面级 client:only 的优点是省事。

因为很多不兼容服务端渲染的逻辑都可以先不处理，只要浏览器里能跑就行。

但是它的代价也很直接：

• 首屏没有真正内容
• 页面更容易白屏
• 语言切换更容易闪动
• 一些本来可以静态输出的内容被无意义地推迟到了客户端

对 Astro 这类项目来说，这其实是方向上的浪费。

3. 这次实际采用的处理方式

这次没有把 React 全部拿掉，而是做了一个更符合 Astro 的取舍：

• 页面入口不再整页 client:only
• 让 Astro 在构建阶段先产出页面 HTML
• React 继续负责交互部分的 hydration

这个调整不是“不要 React”，而是“不要让整页内容都等 React 启动以后才出现”。