フロントエンドが進化するにつれて、ビルド方法やレンダリング方法も多様化したのでまとめてみたいと思います
CSR
CSR(client side rendering)とは、ユーザーのブラウザで全てレンダリングする方法です。
- ほぼ空のHTMLとレンダリングするためのjsやCSSを受け取る
- ブラウザがjsとCSSを読み込む
- jsで描画のためのCSSとHTMLを生成する
- HTMLの特定のタグに生成されたHTMLやCSSを展開する
- 最終的なDOM,CSSMOMをもとにブラウザが描画する
またケースによっては、初期描画のための情報をAPIなどで取得するケースもあリます。
メリット
- 一度読み込めば、あとは都度情報を取得するだけでいいので、ページ遷移なく処理を組める。
- 都度ページ遷移を挟まないのでサーバーへの負荷は少ない
デメリット
- ページを開いてからHTMLなどの生成を行うので初期描画に時間がかかる
- 全ての処理をユーザーに寄せるのでユーザーのCPUやメモリを食う
- 最初は空のHTMLしかないので、SEO的に不利
SSR
SSR(server side rendering)とは、サーバー側でHTMLやCSS,またレンダリングに必要な情報を取得して、その生成結果のHTML,CSS,jsをユーザー側に返す方法です。
- サーバーでJSを実行する
- 描画に必要な情報をサーバー経由で取得する
- 描画直前のHTML,CSSを生成
- ブラウザHTML,CSSを受け取る
- ブラウザが描画
メリット
- 初期描画が非常に早い
- SEOに強い
- サーバーサイドでやってくれるのでユーザーへの負担が少ない
デメリット
- 処理をサーバーに寄せるので、サーバーの負荷が高い
- SSR用のサーバーが必要になる。大抵の場合nodejs
SSG
SSGとはビルド時に全ての情報を取得して完全な静的ファイルを作る方法です。
- ビルド時にAPIなどでコンテンツを取得
- コンテンツを埋め込んだHTML,CSS,jsを生成
- 2.をホスティングサーバーに配置し配信する
メリット
- 速度が非常に早い
- SEOにも強い
デメリット
- ビルド時に全ての情報を取得してビルドするので、コンテンツ量が増えるとビルド時間も増える
- 頻繁に情報を更新するたぐいのサイトと相性が非常に悪い
ISR
アクセスされた時に初めてSSGのビルドが走りサイトを生成する方法です。
- ユーザーがページにアクセスする
- SSGのビルドが走る
- 生成結果をユーザーに返す
- 二回目以降はビルド結果のHTMLが返される
メリット
- SSGのビルド時間を考えなくていい
- 新しい記事などを再配置することで更新できる
デメリット
- キャッシュがかかる場合は更新ページを反映する時がテクニカルになる場合がある
最後に
間違っている部分があれば指摘をお願いします。
では良きフロントエンドライフを