Icon

ChrAlpha

解决 Nuxt.js 项目使用 Cloudflare CDN 后重复渲染两次的问题

TL;DR

Cloudflare 的 Auto Minify 压缩 HTML 会导致不必要的重复渲染和 Hydration 错误,取消勾选 HTML 的压缩选项即可。

参考:

问题发现

我一直在使用 Cloudflare 的部分服务,像是我手头十几个域名 DNS 均托管与 Cloudflare,我的 主页博客 也托管于 Cloudflare Pages / Cloudflare Workers Site,我之前还写过一篇博客记录我 首次迁移到 Cloudflare Workers Site 的经历

而近期拿 Nuxt.js 练手(譬如写了这个 notion-blog),不知道是心血来潮还是莫名其妙,我先是部署到 Vercel/Netlify 上测试,然后发现一个哭笑不得的问题——使用 Vercel/Netlify 默认域名渲染正常;使用绑定托管于 Cloudflare 的域名重复渲染;在 Cloudflare DNS 解析中关闭 CDN 后正常渲染;开启 Cloudflare Development Mode 后正常渲染;配置 Cloudflare 缓存规则后仍重复渲染。

总之,这些问题现象指向问题在 Cloudflare 侧。

解决方案

其实在官方文档(参考 1)中就明确说明过,但可惜我没仔细看「Get Started」部分而主要关注后面「Guide」和「API」部分,走了点弯路。

不过官方文档中的给出的步骤似乎有点矫枉过正,经过我自己控制变量逐个尝试,只有 Auto Minify 的 HTML 选项对于结果有影响。

Notion image

可能是我没有使用到 Nuxt.js 所有特性,不过我相信其对于基础功能以及 Edge-Side Rendering、Server Middleware、Composables、异步 Data fetching 是没有什么影响的。

另外,假如你托管于 Cloudflare 的域名上跑着其他项目需要用到 Auto Minify,此时全局关闭 Auto Minify 可能不为一个比较明智的选择,其实还可以通过配置 Rules 来实现特定 域名/路径 抑或其他规则来特定关闭部分请求的 Auto Minify。

Notion image

以上。