Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
12
Help us understand the problem. What is going on with this article?
@souhei-etou

CSR,SSR,SSG,ISRのまとめ

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

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のビルド時間を考えなくていい
  • 新しい記事などを再配置することで更新できる

デメリット

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

最後に

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

12
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
12
Help us understand the problem. What is going on with this article?