무료로 10,000개 이상의 동적 페이지를 Next.js ISR로 제공하는 방법 (그리고 제가 저지른 실수들)

발행: (2026년 3월 14일 오후 03:04 GMT+9)
4 분 소요
원문: Dev.to

Source: Dev.to

결과

secedgardata.com – 모든 상장 미국 기업의 실시간 SEC 데이터를 제공하는 무료 대시보드.

SEC EDGAR Dashboard showing Alphabet Inc. revenue chart in dark mode

Financial statements table showing Alphabet Inc. income statement with multi‑year data

어떤 티커든 검색하면 매출 차트, 손익계산서, 대차대조표, SEC 제출 이력을 확인할 수 있습니다. 로그인이나 API 키가 필요 없습니다.

문제: 정적화할 수 없는 10 000 페이지

  • Backend: FastAPI on a home server (behind Tailscale).
  • Desired URLs: /stock/AAPL, /stock/MSFT, /stock/PLTR, …

왜 단순 접근법이 실패했는가

문제설명
Build timegenerateStaticParams가 10 000개 이상의 API 호출을 트리거 → 빌드 시간이 수분 단위로 늘어남.
Network accessVercel의 빌드 서버는 AWS에서 실행되며 내 홈 서버에 접근할 수 없어 → 매 배포마다 ECONNRESET 발생.

해결책: 정적 파라미터 없이 온‑디맨드 ISR

// src/app/stock/[ticker]/page.tsx
export const revalidate = 86400; // 24 h
export const dynamicParams = true; // no generateStaticParams

사용자가 /stock/AAPL에 접속하면:

  1. Next.js가 FastAPI 백엔드에 호출해 페이지를 렌더링합니다.
  2. 렌더링된 페이지가 엣지에 24 시간 동안 캐시됩니다.
  3. 이후 방문자는 캐시된 버전을 즉시 받습니다.
  • 첫 방문: ~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이 전체 목록을 거부한 적이 있습니다.

스택

레이어선택이유
FrameworkNext.js 15 (App Router)ISR, Server Components
StylingTailwind + shadcn/ui빠른 구축, 다크 모드 지원
ChartsRecharts가벼우면서 React 친화적
BackendFastAPI (Python)기존 API 활용, 확장 용이
HostingVercel (free tier)ISR + 엣지 캐싱
MonitoringSentry + Vercel Analytics오류 추적 + 페이지 뷰 통계

총 호스팅 비용: $0 / month – 무료 Vercel 플랜이 ISR 캐싱 덕분에 모든 것을 처리합니다.

개발자를 위한 – API 형태의 동일 데이터

pip install sec-edgar-sdk
from 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로 제공됩니다.

추가 자료

버그가 있거나 기능 요청이 있으면 댓글로 알려 주세요.

해킹을 즐기세요!

0 조회
Back to Blog

관련 글

더 보기 »

트라비고

Gemini와 함께 말하는 속도만큼 빠르게 여행하세요! 라이브 에이전트가 몰입형 스토리텔링 및 3D 내비게이션과 만나는 곳. 이 프로젝트는 Gemini Live Ag...에 진입하기 위해 만들어졌습니다.