CSR / SSR / SSG / JAMstack

CSR / SSR / SSG JAMstack

CSR（Client Side Rendering）ブラウザ（クライアントサイド）でコンテンツをレンダリングする - SPA（シングルページアプリケーション）とかがコレ - WEBサーバーがなくていい -
ページ遷移とかも速い - 最近はbotもJavaScriptを実行できるのでSEOは問題ない - でも、OGPとかは無理 - 初回ロードは遅い

SSR（Server Side Rendering）リクエストを受け取ってからWEBサーバ上でコンテンツをレンダリングしてから返す - 初回のロードが速い - OGPとか気にしなくていい -
でも、WEBサーバが必要 - レンダリングがクライアント上とは異なる ※ windowとかdocumentオブジェクトがない

SSG（Static Site Generator）動的なコンテンツを含めレンダリングしてデプロイし、リクエストに対して静的なファイルを返す - 初回のロードがめっちゃ速い - OGPとか気にしなくていい -
WEBサーバもいらない - 動的なコンテンツの場合、データの変更があればレンダリングし直す必要がある - レンダリングがクライアント上とは異なる

JAMstack（SSG + CSR）初回のリクエストにはSSGで返して、ページ遷移など以降はCSRとして振る舞う - 初回のロードがめっちゃ速い - OGPとか気にしなくていい -
WEBサーバもいらない - ログイン認証とかCSRで行うのである程度行える - もちろん動的なコンテンツの場合、データの変更があればレンダリングし直す必要がある - レンダリングがクライアント上とは異なる

他にもNext.jsのincremental static regenerationとかあるみたいだけど、詳しくないので雑に説明すると - SSR + SSG + CSRみたいなやつ
- 初回はSSRだけど、2回め以降はSSGで、CSRもする - Vercelとかホスティングサービス？を使うらしい

ちなみにCSRでのOGPを解決する方法としてnetlifyの Prerenderingって機能がある ※ まだベータ版です

おしまい

CSR / SSR / SSG / JAMstack

CSR / SSR / SSG / JAMstack

Kaneko Takeshi

More Decks by Kaneko Takeshi

Other Decks in Technology

Featured

Transcript