61
37

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

CSR,SSR,SSG,ISRのまとめ

Last updated at Posted at 2021-06-12

フロントエンドが進化するにつれて、ビルド方法やレンダリング方法も多様化したのでまとめてみたいと思います

CSR

CSR(client side rendering)とは、ユーザーのブラウザで全てレンダリングする方法です。

  1. ほぼ空のHTMLとレンダリングするためのjsやCSSを受け取る
  2. ブラウザがjsとCSSを読み込む
  3. jsで描画のためのCSSとHTMLを生成する
  4. HTMLの特定のタグに生成されたHTMLやCSSを展開する
  5. 最終的なDOM,CSSMOMをもとにブラウザが描画する

またケースによっては、初期描画のための情報をAPIなどで取得するケースもあリます。

メリット

  • 一度読み込めば、あとは都度情報を取得するだけでいいので、ページ遷移なく処理を組める。
  • 都度ページ遷移を挟まないのでサーバーへの負荷は少ない

デメリット

  • ページを開いてからHTMLなどの生成を行うので初期描画に時間がかかる
  • 全ての処理をユーザーに寄せるのでユーザーのCPUやメモリを食う
  • 最初は空のHTMLしかないので、SEO的に不利

SSR

SSR(server side rendering)とは、サーバー側でHTMLやCSS,またレンダリングに必要な情報を取得して、その生成結果のHTML,CSS,jsをユーザー側に返す方法です。

  1. サーバーでJSを実行する
  2. 描画に必要な情報をサーバー経由で取得する
  3. 描画直前のHTML,CSSを生成
  4. ブラウザHTML,CSSを受け取る
  5. ブラウザが描画

メリット

  • 初期描画が非常に早い
  • SEOに強い
  • サーバーサイドでやってくれるのでユーザーへの負担が少ない

デメリット

  • 処理をサーバーに寄せるので、サーバーの負荷が高い
  • SSR用のサーバーが必要になる。大抵の場合nodejs

SSG

SSGとはビルド時に全ての情報を取得して完全な静的ファイルを作る方法です。

  1. ビルド時にAPIなどでコンテンツを取得
  2. コンテンツを埋め込んだHTML,CSS,jsを生成
  3. 2.をホスティングサーバーに配置し配信する

メリット

  • 速度が非常に早い
  • SEOにも強い

デメリット

  • ビルド時に全ての情報を取得してビルドするので、コンテンツ量が増えるとビルド時間も増える
  • 頻繁に情報を更新するたぐいのサイトと相性が非常に悪い

ISR

アクセスされた時に初めてSSGのビルドが走りサイトを生成する方法です。

  1. ユーザーがページにアクセスする
  2. SSGのビルドが走る
  3. 生成結果をユーザーに返す
  4.  二回目以降はビルド結果のHTMLが返される

メリット

  • SSGのビルド時間を考えなくていい
  • 新しい記事などを再配置することで更新できる

デメリット

  • キャッシュがかかる場合は更新ページを反映する時がテクニカルになる場合がある

最後に

間違っている部分があれば指摘をお願いします。
では良きフロントエンドライフを

61
37
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
61
37

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?