本PJではNext.js公式チュートリアルを元に実施します。
今回はchapter8の内容となります！
🏎️ 静的 VS 動的 🚀 Webページはいつ作る？Next.jsのレンダリング戦略とパフォーマンスの罠
Webページを表示するとき、「そのページはいつ作られているか」を考えたことはありますか？
実は、Next.jsには大きく分けて2つの戦略があります。
-
静的レンダリング (Static Rendering): 事前に作り置きしておく方法。
-
動的レンダリング (Dynamic Rendering): 注文が入るたびに作る方法。
今回は、この2つの戦略がどう違うのか、そして「動的レンダリング」に潜む重大なパフォーマンスの罠について見ていきましょう！
🍱 静的レンダリング (Static)：最強の"作り置き"戦略
これは、「デプロイ時（お店の開店前）に、人気の弁当（Webページ）を完璧に作り上げて棚に並べておく」戦略です。
ユーザーがアクセス（来店）すると、すでに完成している弁当を「はい、どうぞ！」と瞬時に渡すことができます。
主なメリット
-
とにかく速い！ (高速化): すでに完成品が世界中のCDN（便利な支店）にキャッシュされています。ユーザーは一番近い支店から弁当を受け取るだけなので、表示が爆速です。
-
サーバーに優しい (負荷軽減): 注文ごとに調理（レンダリング）する必要がないため、サーバー（厨房）は大忙しにならず、コストも抑えられます。
-
SEOに強い: 検索エンジンのロボットが来たときも、すでに完成したページがあるので内容をすぐに理解してもらえ、検索順位が上がりやすくなります。
最適な場面：ブログ記事、製品紹介ページ、企業の「会社概要」ページなど、誰がいつ見ても内容は同じページに最適です。
👨🍳 動的レンダリング (Dynamic)：究極の"オーダーメイド"戦略
これは、「お客さん（ユーザー）が来店し、注文（リクエスト）を受けてから、その人のためだけに調理（レンダリング）を始める」戦略です。
主なメリット
-
常に最新！ (リアルタイムデータ): 株価チャートやニュース速報など、データが頻繁に変わるページに対応できます。
-
あなた専用！ (ユーザー固有のコンテンツ): 「マイページ」や「ダッシュボード」など、ログインしたユーザーごとに表示内容を変えることができます。
-
リクエスト情報を活用: Cookie情報やURLのパラメータ（
?id=123など）を見て、表示内容を調整できます。
😱 動的レンダリングの罠：「遅い食材」がすべてを止める
「オーダーメイド」は素晴らしい響きですが、大きな弱点を抱えています。
それは、「コース料理（ページ全体）の完成速度は、一番遅い食材（データ取得）の到着速度に依存する」という問題です。
例えば、ダッシュボードページを「コース料理」だと想像してください。
-
売上データ（前菜） -
最新の請求書リスト（スープ） -
顧客数（メインディッシュ）
これらを動的レンダリングで用意するとき、もし「前菜」の売上データを取得するのに3秒かかってしまったらどうなるでしょう？
答えは、「前菜が届くまで、スープもメインディッシュも調理を始められない」です。
結果として、ページ全体が表示されるまでに丸々3秒間、ユーザーは真っ白な画面（またはローディング画面）を見続けることになります。たった一つのデータが遅いだけで、ページ全体の体験が最悪になってしまうのです。
この「一つの遅れが全体をブロックする」問題こそが、動的レンダリングが直面する最大の課題です。
今回はここまで！
ご覧いただきありがとうございます！