一早起来Vercel账单暴涨10倍，AI编程坑死我了！你们也要注意啊
事情是这样的。 前几天我不是做了一套Claude Code源码学习教程吗，吸引了很多人来学习： 一周过去，UV过万，PV近5万，这对于一个刚刚建内容的网站还算不错。 因为是热点事件，Google 搜索引擎的流量来得很快，我还挺开心的。 然而，很快我就开心不起来了😭。
一觉醒来，钱没了
我用的是 Vercel 部署，一般情况下费用很低。 但那两天，每天的账单飙到了上百块人民币。 我一脸懵，心想这流量虽然涨了，但也不至于烧这么多钱吧？ 排查之后发现，问题出在 AI 给我写的代码上。 而且不是一个问题，是两个问题叠加在一起，直接把费用拉爆了。
第一个坑：阅读数让页面变成了"永远的动态页"
AI 帮我做教程页面的时候，加了一个阅读数展示功能。
每篇教程都会实时显示当前有多少人读过。
看起来很贴心对吧？
但问题是，为了展示这个实时阅读数，每个页面都变成了动态渲染。
什么意思呢？
正常情况下，一篇教程文章的内容是固定的，Vercel 会把它缓存起来。
用户访问的时候，直接从CDN返回缓存好的页面，几乎不消耗服务器资源。
但是一旦页面里有动态数据，Vercel 就没法缓存了。
每个用户每次访问，服务器都要重新生成一遍整个页面。
这就产生了大量的Fast Origin Transfer，也就是CDN失效，服务器每次都要从源站传输全新的页面内容，。
流量一大，这个费用直接起飞。
第二个坑：预加载技术变成了"流量炸弹"
这还没完。 AI 在代码里用了 Next.js 的 Link 组件预加载功能。 这个功能的本意是：你在读一篇文章的时候，浏览器会提前把页面上所有链接指向的内容都下载好。 这样你点击跳转的时候，页面秒开，体验很好。 听起来也很不错吧？ 但坑爹的是，我的教程页面左侧有个文章目录，这里有几十个链接指向其他教程。 用户打开一篇文章，浏览器就在后台默默请求了几十个页面，这流量成几十倍放大了。 而即便是有CDN，但也有过期时间，一旦过期了这些请求也还是要全部打到了源站服务器。 两个坑叠在一起，结果就是账单炸了！
问题修复
找到问题之后，修复方案其实很清楚。 第一个问题，把阅读数改成客户端加载。 页面本身还是静态生成的，阅读数通过浏览器端的 JS 请求单独获取。 这样页面就能被缓存了，服务器压力直接降了一个量级。 第二个问题，关掉Link组件的自动预加载。 Next.js 的 Link 组件有个 prefetch 属性，设成 false 就行。 改完之后，费用立刻回到了正常水平。 两个改动加起来，也就改了几行代码的事。 我虽然不是专业前端，但多少还算懂点这方面的东西。 看到 Vercel 账单飙了，我知道去翻用量分析面板。 看到 Fast Origin Transfer 数字不对，我能猜到是缓存出了问题。 看到一堆带 _rsc 参数的请求，我知道这是 Next.js 预加载在搞鬼。 顺着线索一路排查下来，花了大半天时间，总算定位到了。
最后说几句
这件事让我后怕的是，如果我不懂技术呢？ AI 就像一个超级听话的实习生，我让它加阅读数，它就加，我没说关预加载，它就不关。 活干得又快又好，但从来不会说"老板我觉得这样不太合适"。 然后我就这么把实习生的代码直接上线了，连看都没看。 最离谱的是，我自己还是搞技术的，都没意识到有问题。 要不是看到账单，我可能到现在还蒙在鼓里。 我好歹还知道去翻vercel日志排查，换个不懂技术的人，大概只能对着账单发呆了。 现在用 AI 编程的人越来越多了，很多就是不懂技术的。 设计师在用 AI 做自己的作品集网站，产品经理在用 AI 搞内部工具，创业者在用 AI 做 MVP。 AI 生成的代码跑起来没毛病，功能也都正常，看起来一切完美。 但谁知道AI写的代码里有没有给你埋雷？ 这事之后我想到后续要做一个自动化check的流程，把这些问题及时扼杀在开发阶段，打算以Skill的形式呈现。 把做网站开发中的核心关切点，尤其是像钱、安全、性能相关的内容，做成一个自动化的检查流程，防止AI再一次把我带沟里。 如果大家也需要这样的Skill，可以关注蹲一波后续。 好了，今天就分享到这里。 如果觉得有收获话，求个点赞。 路过的朋友欢迎点个关注，及时获得下期文章推送~
往期推荐
- 手把手带你用AI开发一个代码全景图分析智能体，一键分析GitHub项目！
- 一句话让AI生成科普动画，做动画视频太简单了！
- Agent Skills技术到底是什么，一个动画彻底搞懂！
- Gemini3现在能做这种地图轨迹动画了，免费就能体验！
- 彻底去除AI编程AI味儿，三种方法让你的网站原地升天！
- 如何学习操作系统？
- 如何学习计算机网络？
- 如何学习C/C++编程？
- 如何学习网络安全？
- 程序员赛道太卷，逆向工程师怎么样？