JavaScriptデザインパターンを学ぶ 第2版

第13章. レンダリング・パターン

この作品はAIを使って翻訳されている。ご意見、ご感想をお待ちしている：[e-mail]

よりインタラクティブなWebサイトに移行するにつれ、 、クライアント側で処理されるイベントの数やレンダリングされるコンテンツの量が増え、React.jsのように主にクライアント側でレンダリングされるSPAが生まれた。

しかし、Webページはその機能に応じて静的にも動的にもなる。例えば、サーバ上で生成し、そのままクライアントにプッシュできるブログやニュースのページだ。静的コンテンツはステートレスで、イベントを発生させず、レンダリング後に水分を補給する必要もない。逆に、動的コンテンツ（ボタン、フィルタリング、検索バー）は、レンダリング後にイベントを再ワイヤリングする必要がある。クライアント側でDOMを再生成しなければならない（仮想DOM）。この再生成、水分補給、イベント処理関数が、クライアントに送信されるJavaScriptに寄与する。

レンダリングパターンは、与えられたユースケースに対してコンテンツをレンダリングするための理想的なソリューションを提供する。この表のレンダリングパターンは一般的なものである：

レンダリングパターン
クライアント側レンダリング（CSR）	HTMLは完全にクライアント上でレンダリングされる。
サーバ側レンダリング（SSR）	サーバでHTMLコンテンツを動的にレンダリングしてから、クライアントでそれを再生成する。
静的レンダリング	静的サイトを構築し、構築時にサーバにページをレンダリングする。
インクリメント静的生成	初期化後も、静的サイトを動的に拡張または修正できる（Next.js ISR、Gatsby DSG）
ストリーミングSSR	サーバでレンダリングされたコンテンツを、より小さなストリームチャンクに分割する。
エッジレンダリング	クライアントに送信する前に、レンダリングされたHTMLをエッジで変更する。
ハイブリッドレンダリング	ビルドタイム、サーバ、クライアントレンダリングを組み合わせて、より柔軟なウェブ開発アプローチを作成する（React Server ComponentsやNext.js App Routerなど）。
部分的な水分補給	コンポーネントの一部だけをクライアントにハイドレートする（React Server ComponentsやGatsbyなど）。
段階的な水分補給	クライアントの水分補給の順番をコントロールする
諸島アーキテクチャ	静的なサイト（アストロ、イレブンティ）において、複数のエントリ点を持つ動的な振る舞いの島が孤立している。
プログレッシブ・エンハンスメント	JavaScriptがなくてもアプリが機能するようにする

この章では、これらのレンダリングパターンのいくつかを紹介し、どのパターンが自分のニーズに最も適しているかを決める手助けをする。この章は、次のような基本的な決定をするのに役立つだろう：

• コンテンツをどこでどのようにレンダリングしたいのか？

• コンテンツはウェブサーバ、ビルドサーバ、エッジネットワーク、あるいは直接クライアント上でレンダリングされるべきなのだろうか？

• コンテンツは一度にレンダリングすべきか、部分的にレンダリングすべきか、段階的にレンダリングすべきか。

レンダリングパターンの重要性

特定のユースケースに最も適したレンダリングパターン（ ...