CSR / SSR / SSG / JAMstack

Transcript

1. CSR / SSR / SSG JAMstack
2. CSR（Client Side Rendering） ブラウザ（クライアントサイド）でコンテンツをレンダリング する - SPA（シングルページアプリケーション）とかがコレ - WEBサーバーがなくていい - ページ遷移とかも速い - 最近はbotもJavaScriptを実行できるのでSEOは問題ない - でも、OGPとかは無理 - 初回ロードは遅い
3. SSR（Server Side Rendering） リクエストを受け取ってからWEBサーバ上でコンテンツ をレンダリングしてから返す - 初回のロードが速い - OGPとか気にしなくていい - でも、WEBサーバが必要 - レンダリングがクライアント上とは異なる ※ windowとかdocumentオブジェクトがない
4. SSG（Static Site Generator） 動的なコンテンツを含めレンダリングしてデプロイし、リク エストに対して静的なファイルを返す - 初回のロードがめっちゃ速い - OGPとか気にしなくていい - WEBサーバもいらない - 動的なコンテンツの場合、データの変更があればレンダリングし 直す必要がある - レンダリングがクライアント上とは異なる
5. JAMstack（SSG + CSR） 初回のリクエストにはSSGで返して、ページ遷移など以 降はCSRとして振る舞う - 初回のロードがめっちゃ速い - OGPとか気にしなくていい - WEBサーバもいらない - ログイン認証とかCSRで行うのである程度行える - もちろん動的なコンテンツの場合、データの変更があればレン ダリングし直す必要がある - レンダリングがクライアント上とは異なる
6. 他にもNext.jsのincremental static regenerationとか あるみたいだけど、詳しくないので雑に説明すると - SSR + SSG + CSRみたいなやつ - 初回はSSRだけど、2回め以降はSSGで、CSRもする - Vercelとかホスティングサービス？を使うらしい
7. ちなみにCSRでのOGPを解決する方法としてnetlifyの Prerenderingって機能がある ※ まだベータ版です
8. おしまい