Vercel 靠 Next.js 应用打出名气，所以有些内容站作者以为给博客用是杀鸡用牛刀。其实不是。一个静态的 Astro 或 Next.js 内容站，几分钟就能部署到 Vercel，并白拿到 preview deploy、图片优化和分析，无需额外接线。真正要紧的只有一个问题：在你这个流量量级下，带宽要花多少钱——而这只是算术题。本文给你 2026 年 6 月的数字，以及你自己能套用的公式。
一句话结论
- 商业内容站必须用 Vercel Pro，每席位每月 $20（免费的 Hobby 套餐禁止商用，挂广告和联盟链接都算）。
- Pro 每月含 1 TB Fast Data Transfer 和 1000 万次 edge 请求，外加 $20 用量额度。超出 1 TB 后带宽按 $0.15/GB 计费。
- 一个典型独立博客月 10 万 PV 大约消耗 5-30 GB——离上限远得很。
- 只有当你稳定跑到 每月数 TB 带宽 时才需要重新考虑 Vercel，那种规模下 Cloudflare Pages（带宽不限量、免费版也允许商用）会便宜不少。
- 所有数字均按 2026 年 6 月核对自 Vercel 定价文档。
什么时候该选 Vercel
下面这些大多成立时，内容站选 Vercel 是对的：
- 你用 Astro、Next.js 或其它 Vercel 一等支持的框架做内容。
- 月带宽稳稳落在 1 TB 以内（绝大多数独立站都是如此）。
- 你想要按分支的 preview deploy、内置图片优化，以及一个面板同时管部署和分析。
- 比起手调 CDN，你更看重零配置的 Git 部署。
如果你稳定每月发出好几 TB，或者团队早已统一在别的平台上，那就跳过 Vercel——或者至少把 Firebase 等方案 一起算一遍价。
Hobby 与 Pro：决定性的数字
最大的坑是 Vercel Hobby 仅限非商业用途。Vercel 的公平使用条款把商用定义为任何为某人带来经济收益的部署——这就涵盖了展示广告、联盟链接和接私活。只要你的内容站赚钱，Hobby 就用不了，必须上 Pro。
以下是静态内容站真正在意的额度，截至 2026 年 6 月：
| 资源 | Hobby（免费，非商业） | Pro（每席位每月 $20） |
|---|---|---|
| Fast Data Transfer 包含 | 100 GB/月 | 1 TB/月 |
| 带宽超额 | 不计费（优化暂停） | $0.15/GB |
| Edge 请求包含 | 100 万/月 | 1000 万/月 |
| 图片转换 | 5K/月 | $20 额度内含，之后每 1K $0.05-$0.08 |
| 图片缓存读 / 写 | 30 万 / 10 万 每月 | 额度用完后计量 |
| 用量额度 | 无 | $20/月 |
| 商业用途 | 不允许 | 允许 |
Hobby 超出图片转换额度后，新图片返回 HTTP 402 并回退显示 alt 文本，而已缓存的图片继续正常服务。Pro 上这部分用量先抵扣 $20 额度。两个套餐都有硬性图片限制：转换后单图上限 10 MB，源图每边上限 8192 像素。
带宽算账：你究竟会不会被超额收费
先估算再焦虑。取一张有代表性的页面的真实传输重量，然后相乘：
# 单篇缓存文章页（仅 HTML）的压缩后重量
curl -sLI --compressed https://yourdomain.com/articles/some-slug/ \
| grep -i content-length
# 构建产物总大小，用来粗估平均单页重量
du -sh dist/公式：
GB/月 ≈ (单页 KB × 月 PV) / 1024 / 1024套进真实场景：
| 月 PV | 单页约 120 KB | 结论 |
|---|---|---|
| 10 万 | 约 12 GB | 深在 Hobby 的 100 GB 内，Pro 上不值一提 |
| 100 万 | 约 115 GB | 稳稳落在 Pro 的 1 TB 内 |
| 500 万 | 约 570 GB | 只要图片精简仍在 1 TB 以内 |
| 1000 万 | 约 1.1 TB | Pro 上约 $15/月 超额；这量级该比一比 Cloudflare |
图片重的页面会让数字飙得很快。一篇做工扎实的 Astro 文章页 120 KB 很现实；但塞进三张未优化的大头图，就能翻到 5 倍。下面的图片流水线就是用来把你压在上限以下的。
部署一个静态内容站
1. 起项目
纯内容站默认选 Astro 更好；如果要嵌入真正的 React 应用就选 Next.js。
npm create astro@latest mysite -- --template blog
cd mysite
npm install @astrojs/sitemap @astrojs/vercel2. 加一份最小的 vercel.json
显式控制缓存、跳转和 cleanUrls，这样就不靠默认值碰运气：
{
"cleanUrls": true,
"trailingSlash": true,
"redirects": [
{ "source": "/blog/(.*)", "destination": "/articles/$1", "permanent": true }
],
"headers": [
{
"source": "/_astro/(.*)",
"headers": [
{ "key": "Cache-Control", "value": "public, max-age=31536000, immutable" }
]
},
{
"source": "/(.*)\\.html",
"headers": [
{ "key": "Cache-Control", "value": "public, max-age=300, s-maxage=3600" }
]
}
]
}带哈希的 /_astro/ 资源加上 immutable，能让回访用户完全不再消耗你的带宽额度。
3. 在 astro.config.mjs 里设主站
import { defineConfig } from 'astro/config';
import sitemap from '@astrojs/sitemap';
import vercel from '@astrojs/vercel/static';
export default defineConfig({
site: 'https://yourdomain.com',
trailingSlash: 'always',
build: { format: 'directory' },
output: 'static',
adapter: vercel(),
integrations: [sitemap()],
});4. 连仓库部署
npm install -g vercel
vercel link
vercel --prod
# Production: https://yourdomain.vercel.app然后在面板里：Project → Domains → 加 yourdomain.com，按 Vercel 给你的 DNS 记录照填（它会为你的项目生成确切的 CNAME 和 A 值——别照抄博客里写死的 IP，因为 Vercel 会轮换）。
5. 开启分析
在面板里打开 Speed Insights 和 Web Analytics，再把 snippet 加进根 layout：
---
import SpeedInsights from '@vercel/speed-insights/astro';
import Analytics from '@vercel/analytics/astro';
---
<SpeedInsights />
<Analytics />Web Analytics 注重隐私、不用 cookie，省去了内容站常被同意横幅卡住的麻烦。
6. 接好图片优化
---
import { Image } from 'astro:assets';
import hero from '../assets/hero.jpg';
---
<Image src={hero} alt="hero" widths={[400, 800, 1200]} formats={['avif', 'webp']} />Vercel 从边缘提供并缓存 AVIF/WebP 变体。每个唯一的转换都计入 Hobby 的 5K 额度或 Pro 额度，所以定一小套固定的 widths，别让每个布局都去请求一个量身定制的尺寸。
7. 核对主域干净无漏
把生产域提交 Search Console，再确认没有 *.vercel.app 漏进 canonical 或 sitemap：
grep -ROIE 'rel="canonical"|og:url' dist | grep -v yourdomain.com | head
# 有任何输出 = 有漏要修上线检查清单
vercel.json给/_astro/设了immutable缓存，并配好跳转和 cleanUrls。astro.config.mjs设好site、trailingSlash和 Vercel 静态 adapter。- Speed Insights 和 Web Analytics snippet 在根 layout 里。
- 图片流水线从一小套固定 widths 产出 AVIF/WebP。
- Search Console 在生产域验证通过，没有任何
*.vercel.app漏出。
容易踩的坑
- 用 Hobby 跑赚钱的站。 广告和联盟链接都算商用，必须 Pro。
- 图片不优化，然后流量翻 5 倍时一脸懵。
- 能静态的内容用 Next.js SSR——白掏不必要的算力钱。
- canonical 标签或 sitemap 里还留着
*.vercel.app，会分散收录信号。 - 把 preview URL 当线上用。 它默认 noindex，但很容易通过共享文档泄漏；客户审稿请用密码保护（Pro 功能）。
cleanUrls不匹配。 开了cleanUrls: true但框架输出about/index.html，就会产生歧义 301。设置要和框架的文件命名一致。
FAQ
静态 Astro 站需要 ISR 吗？ 不需要。纯静态 Astro 构建直接走 CDN。ISR（增量静态再生成）只有在页面需要请求时算出新数据时才有意义，而内容文章很少这样。
部署在 Vercel 会比”正经” host 更伤 SEO 吗？ 不会。Vercel CDN 很快，静态站的 Core Web Vitals 一般非常好，而且 Google 不按谁家 CDN 发字节来排名。要紧的是你的主域、页面速度和内容。
Vercel 做内容什么时候会变贵？ 当你稳定超出 Pro 的 1 TB/月、$0.15/GB 的超额开始累积时。大约到 1000 万 PV 以上且图片很重时，就该把 Cloudflare Pages 算一算——它带宽不限量，免费版也允许商用。
Vercel 的 CDN 比 Cloudflare 快吗？ 对多数访客体感相当。Cloudflare 边缘节点更多（330+ 对 Vercel 的 100+），但对一张静态页面这点差异很少能感知到。Vercel 真正的差异在平台功能——preview deploy 和图片优化——而非边缘原始速度。
Preview deploy 能给客户审稿用吗？ 可以。每个分支和 commit 都有独立的 preview URL。接私活时开密码保护（Pro 功能），让草稿保持私密、不进收录。