我用 Nuxt 4 撸出了博客的硬装

2026/3/12技术文章 约 3 分钟阅读

我最初是在外国大佬 James Ross 的博客里看到了一篇神作:《Server Side Rendering Vue.js 3.2+ on Cloudflare Workers》,里面介绍了如何用vue的原生api构建ssr应用部署到 Cloudflare Workers 中。因为这篇文章,我完成了个人的ssr博客项目,再次感谢这位大佬。当然,我前端前台为了更快的渲染用了ssr,管理后台还是省事用了Element plus 构建 csr。

我为什么用 Nuxt4?

我使用nuxt主要是为了服务端渲染SSR (Server-side Rendering),还有我 vue 写的比较多,nuxt是基于vue的,我是看了下面这篇博客后使用的它

参考这个博主 James Ross 的博客 Server Side Rendering Vue.js 3.2+ on Cloudflare Workers with pipeToWebWritable

这里说了,可以写 vue ssr 项目部署到 Cloudflare Workers,Cloudflare Workers支持 vue ssr,里面主要用了 createSSRApprenderToString 等,但是在 Cloudflare Workers 中使用的是 renderToWebStream

vue srr 的价绍:

https://vuejs.org/guide/scaling-up/ssr.html#server-side-rendering-ssr

开始学习 Nuxt

我确定好 Nuxt 后就着手开始学习 Nuxt 4,我上班时间只要有时间看手机,就看它的文档,摸鱼时间也是用来看文档,下面是他的官网

Nuxt 官网:

https://nuxt.com/

有同事喜欢悄悄瞅瞅我手机,看见全是英语,说我专门看这些乱七八糟的,其实我也看不懂,但是看到代码,就能猜个大概,时间长了,就能知道是什么意思了,但是就是不好说出来,不好给人解释,就说是新闻

文档很全面,介绍了各种组件,部署,以及他的思想,我接触的时候已经是 nuxt4.0,但是几天下来我就上手了

不需要全部准备好

如果你开始,从头看到尾去学一样东西,死记硬背,那么还没有学完就更新迭代了,该怎么办?

我的方法是找出它主要的思想,然后简单看一遍文档,看看一些 demo ,就开始安装项目,开始上手,白天看文档,下班敲代码

上手之后,总是出错,遇到问题查文档,废了好大劲才解决的难点给记录下来,这种深坑一般自己踩过,就不会遇到了,比如其中遇到最多的是时间问题,服务器时间和用户时间不一样,导致水合失败。还有就是缓存,用缓存可以降低请求次数等。

一边写代码一边查文档,或者问 ai ,Google,deepl翻译,总能看明白。不要存在技术虚荣,是为了解决问题才用它,不是为了学它而学它。当今社会技术更新迭代飞快,不要死记硬背

很多人学技术喜欢从头看到尾,死记硬背。这在当今社会是最蠢的办法。


技术更新比翻书还快,我的方法是:

  1. 抓大放小:搞清楚核心思想(比如什么是约定式路由,什么是水合)。
  2. 不求甚解:简单过一遍文档和 Demo,直接开干 npx nuxi@latest init
  3. 白天看文档,下班敲代码:上班时脑子里构思架构,下班了直接把想法变成代码。

遇到报错了?那是好事。废了好大劲踩过的坑,才叫经验。 比如我被“水合失败(Hydration Mismatch)”折磨过好几次,后来才知道是服务器和客户端的时间戳对不上;比如为了省那点请求次数,我研究了好久的缓存策略。这些东西,你不亲手敲一遍,看一百遍文档也记不住。

总结

避免完美主义,我们可能还没有全部准备好就开始出发,这在网络用语叫,干中学,还是学中干。一边输入,一边输出,我才能记得住。不要为了学而学。技术只是工具,比如我学完用完 nuxt 后现在我可能说不清楚它了,但是我记住它的思想,如果还要再用一次,我把这个项目打开,看见它的代码就能唤醒我的记忆。