レンダリング図鑑

戦略を選んで、リクエストからコンテンツが表示されるまでの流れを比較する。

戦略ごとの表示イベントタイミング

TTFB・FCP・LCP・操作可能の到達タイミングを示す。

※ 数値(ms)は戦略間の相対的な違いを伝えるための仮の値です。実際の速度はネットワークやページの内容によって変わります。

戦略ごとのトレードオフ

処理時間以外の軸で、それぞれの得意・不得意を比較する。

◎良い ○普通 △やや弱い ✕弱い

※ 本図鑑では学習のため6つの戦略を1つずつ切り分けていますが、実務(Next.js等のフレームワーク)ではページ単位で1つを選ぶのではなく、コンポーネントやfetch単位で複数の戦略が1ページ内に混在するのが一般的です。詳しくはNext.js公式ドキュメント: Rendering Philosophyを参照してください。