Next.js App Router による
爆速SSG（静的サイト生成）
"1,000件のページを速くするのは簡単です。しかし、3,650,000件のページを『全速力』で動かすには、従来のWebの常識を捨てる必要がありました。"
1. generateStaticParams：静的生成の暴力
Next.js 14の真骨頂は、ビルド時にデータをHTMLとして書き出しておくSSG（Static Site Generation）にあります。 365万件ものレコードがある場合、全ページを一度にビルドするのは現実的ではありません。私たちは、**「アクセスが多い主要1万ページを事前にビルド」**し、残りはオンデマンドで生成するハイブリッド戦略を採用しました。
Performance Score
LCP（最大視覚コンテンツの表示）は0.8秒を記録。サーバーのDB検索を待たず、CDNから直接HTMLを配信することで、GoogleのCore Web Vitalsで満点を叩き出します。
2. ISR（Incremental Static Regeneration）の運用
データは常に更新されます。365万件のDBが更新されるたびに再ビルドしていては身が持ちません。 BICSTATIONでは、`revalidate`（ISR）を活用。ユーザーが古いページにアクセスした際、裏側でそっと最新データに差し替える「バックグラウンド更新」を実装し、情報の鮮度と爆速な表示を両立させています。
3. ビルド時間の最適化：1分1秒を削る工夫
大規模プロジェクトにおいて、ビルド時間はエンジニアの寿命を削る課題です。 私たちは、ビルドプロセスを並列化し、Django APIへのリクエストをキャッシュすることで、無駄なオーバーヘッドを排除。Next.jsのサーバーコンポーネントが、DRFから受け取った「精製済みデータ」を最短距離でHTMLに流し込むフローを完成させました。
- ■Streaming: データ読み込み中にスケルトンを表示し、体感速度を向上。
- ■Partial Prerendering: 静的部分と動的部分を分離した次世代レンダリング。
- ■Memory Leak Prevention: 数百万のループを回しても死なないNode.js管理。
次回予告：システム美の実装
圧倒的な「速さ」を手に入れたら、次は「美しさ」です。 第7回では、エンジニアリングの誇りを視覚化するLucide-ReactとTailwind CSSを駆使した、BICSTATION独自の「グリッチUI」とダークモードの実装哲学を公開します。