무료로 10,000개 이상의 동적 페이지를 Next.js ISR로 제공하는 방법 (그리고 제가 저지른 실수들)
Source: Dev.to
결과
secedgardata.com – 모든 상장 미국 기업의 실시간 SEC 데이터를 제공하는 무료 대시보드.


어떤 티커든 검색하면 매출 차트, 손익계산서, 대차대조표, SEC 제출 이력을 확인할 수 있습니다. 로그인이나 API 키가 필요 없습니다.
문제: 정적화할 수 없는 10 000 페이지
- Backend: FastAPI on a home server (behind Tailscale).
- Desired URLs:
/stock/AAPL,/stock/MSFT,/stock/PLTR, …
왜 단순 접근법이 실패했는가
| 문제 | 설명 |
|---|---|
| Build time | generateStaticParams가 10 000개 이상의 API 호출을 트리거 → 빌드 시간이 수분 단위로 늘어남. |
| Network access | 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에 제출했을 때 – 1일 차에 10 464개의 URL이 모두 인식되었습니다.
Gotcha: 사이트맵에 있는 도메인이 Search Console 속성과 일치하는지 확인하세요; 오래된 개발 URL 때문에 Google이 전체 목록을 거부한 적이 있습니다.
스택
| 레이어 | 선택 | 이유 |
|---|---|---|
| Framework | Next.js 15 (App Router) | ISR, Server Components |
| Styling | Tailwind + shadcn/ui | 빠른 구축, 다크 모드 지원 |
| Charts | Recharts | 가벼우면서 React 친화적 |
| Backend | FastAPI (Python) | 기존 API 활용, 확장 용이 |
| Hosting | Vercel (free tier) | ISR + 엣지 캐싱 |
| Monitoring | Sentry + Vercel Analytics | 오류 추적 + 페이지 뷰 통계 |
총 호스팅 비용: $0 / month – 무료 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로 제공됩니다.
추가 자료
- REST API on RapidAPI: sec-edgar-data-api — 무료 티어: 월 100 req
- Python SDK on PyPI: sec-edgar-sdk
- Source on GitHub: LiamAltie/sec-edgar-sdk
- 대시보드 체험: secedgardata.com
버그가 있거나 기능 요청이 있으면 댓글로 알려 주세요.
해킹을 즐기세요!