中间件之坑 (Middleware) —— 杀伤力:⭐⭐⭐⭐⭐
问题: middleware.ts 默认拦截所有请求(图片、CSS、Favicon)。每一个静态资源加载都变成一次代码执行。
后果: Edge Requests 爆炸(数万次/天),拖慢图片加载速度。
对策: 必须配置 matcher,排除静态文件。
图片组件之坑 (Image Optimization) —— 杀伤力:⭐⭐⭐⭐
问题: 使用 默认会调用 Vercel 的图片处理服务。
后果: 免费版每月只有 1000 张原图额度。资源站极易超标,导致图片变成 402 错误。
对策:
全局配置 unoptimized: true(推荐)。
本地将 PNG 转 WebP,直接分发静态文件。
动态渲染之坑 (SSR/404) —— 杀伤力:⭐⭐⭐⭐
问题: 页面每次访问都重新生成(0% Cache),特别是 404 页面如果是动态的,会被爬虫刷爆。
后果: Fast Origin Transfer (流量) 耗尽,Serverless Function 执行时间超标。
对策:
动态页(详情页)必须上 ISR (revalidate + generateStaticParams)。
404 页面必须是纯静态组件。
预加载之坑 (Link Prefetch) —— 杀伤力:⭐⭐⭐
问题: 列表页的 只要出现在屏幕上就会发请求。
后果: 莫名其妙产生大量 Edge Requests,即便用户什么都没点。
对策: 在密集列表的链接上加 prefetch={false}。
官方插件之坑 (Analytics) —— 杀伤力:⭐⭐
问题: 开启 Speed Insights / Web Analytics。
后果: 每个访客自动产生额外的统计请求,积少成多。
对策: 在 Vercel 后台关闭这两个功能,改用 Google Analytics 或 Umami。