設計・開発 †
SPA/MPA †
- CSR を使わずに、SSR のみで実装されたアプリは MPA になる
- クライアントのリクエスト毎に、毎回サーバー側でレンダリングが実行される場合の SSR は、単一ページではなく複数のページをレンダリングすることになるので、この場合は、SPA ではなく MPA（Multi Page Application）と呼ばれる構成手法になる
- 逆に、CSR + SSR で実装されたアプリは SPA になる
レンダリング †
SSG (Static Site Generation) †
CSR (Client Side Generation) †
- ビルド時にデータ取得を行わず、ページを描画して保存
- ブラウザで初期描画した後に非同期でデータを取得して、追加のデータを描画
- CSRはSSG,SSR,ISRと組み合わせて利用される
- SPA のアプリケーションを構築するには CSR が必須になる
- 場合によって、CSR + SSR、CSR + SSG など組み合わせて SPA を構築することもある
- 初期描画がそこまで重要ではなく、リアルタイム性が重要なページに適している
SSR (Server Side Rendering) †
ISR (Incremental Static Regeneration) †
- 事前にページを生成して配信しつつ、アクセスに応じてページを再度生成して新しいページを配信
- サーバに保存しているページデータに有効期限を設定しておき、有効期限が切れた状態でアクセスがあった場合は、サーバに保存されているページデータを更新する
組み合わせ †
CSR+SSG †
- SSGで生成した部分（共通部分）はキャッシュさせて配信しつつ、必要な箇所だけCSRを用いてその場でレンダリング可能というメリットがある
- SPAとの違い
- SPAは、初期表示においてゼロからHTMLを構築していく
- SSG+CSRは、すでに共通部分がHTMLとして構築されているので初期表示のコストを抑えることができる
CSR+SSR †
CSR+ISR †
状態管理 †
コンポーネント指向 †
セキュリティ †
要件定義 †
開発事例 †
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
