我如何使用 Next.js ISR 免费提供 10,000+ 动态页面（以及我犯的错误）
发布: (2026年3月14日 GMT+8 14:04)
4 分钟阅读
原文: Dev.to
Source: Dev.to
结果
secedgardata.com – 一个免费仪表盘，实时提供每家在美国公开交易公司的 SEC 数据。
搜索任意股票代码，查看收入图表、损益表、资产负债表以及 SEC 备案历史。无需登录，也不需要 API 密钥。
问题：10 000 个页面无法静态化
- 后端： 在家庭服务器上运行的 FastAPI（通过 Tailscale 访问）。
- 期望的 URL：
/stock/AAPL、/stock/MSFT、/stock/PLTR，……
为什么朴素的做法会失败
| 问题 | 说明 |
|---|---|
| 构建时间 | generateStaticParams 会触发 10 000+ 次 API 调用 → 构建时间以分钟计。 |
| 网络访问 | Vercel 的构建服务器运行在 AWS，无法访问我在家中托管的后端 → 每次部署都会出现 ECONNRESET。 |
解决方案：按需 ISR，无需静态参数
// src/app/stock/[ticker]/page.tsx
export const revalidate = 86400; // 24 h
export const dynamicParams = true; // no generateStaticParams当用户访问 /stock/AAPL 时：
- Next.js 调用 FastAPI 后端并渲染页面。
- 渲染后的页面在边缘缓存 24 小时。
- 后续访客会即时收到缓存的版本。
- 第一次访问：约 800 ms。
- 缓存访问：
({
url: `https://secedgardata.com/stock/${t.ticker}`,
changeFrequency: "weekly",
priority: 0.8,
});已提交至 Google Search Console——所有 10 464 个 URL 在第 1 天即被识别。
注意事项： 确保站点地图中的域名与 Search Console 的属性匹配；一个过时的开发 URL 导致 Google 拒绝了整份列表。
技术栈
| 层级 | 选择 | 为什么 |
|---|---|---|
| 框架 | Next.js 15（App Router） | ISR、服务器组件 |
| 样式 | Tailwind + shadcn/ui | 快速构建，支持暗色模式 |
| 图表 | Recharts | 轻量，React 原生 |
| 后端 | FastAPI（Python） | 现有 API，易于扩展 |
| 托管 | Vercel（免费层） | ISR + 边缘缓存 |
| 监控 | Sentry + Vercel Analytics | 错误追踪 + 页面浏览统计 |
总托管费用： $0 / 月 – 免费的 Vercel 层通过 ISR 缓存处理了一切。
对开发者 – 同样的数据可作为 API 使用
pip install sec-edgar-sdkfrom sec_edgar import SecEdgar
api = SecEdgar("YOUR_RAPIDAPI_KEY")
for year in api.revenue("AAPL", limit=5):
print(f"FY{year['fiscal_year']}: ${year['value']:,.0f}")为仪表盘提供动力的后端同样以公开的 REST API 形式暴露。
其他资源
- RapidAPI 上的 REST API： sec-edgar-data-api — 免费层：100 请求/月
- PyPI 上的 Python SDK： sec-edgar-sdk
- GitHub 上的源码： LiamAltie/sec-edgar-sdk
- 尝试仪表盘： secedgardata.com
如果你发现任何 bug 或有功能需求，请在评论中告诉我。
祝编码愉快！