46
32

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.

【SSRとは】WEBアプリでシンプルなHTML・CSRと比べながらSSRを理解する

Last updated at Posted at 2020-12-22

Nuxt.jsで開発していて、SSRってなんじゃーーーい!!

サーバー側でHTMLとやらが描画されるからどうなるんじゃーーーい!!という疑問が拭えなかったので、SSRについて調べてみました。

SSRってなんだろう

簡単に、SSRの説明です。

  • サーバーサイドレンダリング(Server Side Rendering)の略語
  • サーバーがブラウザに描画されたデータをブラウザに直接送信する。ブラウザ側でデータを入手するためにAPIを呼び、DOM操作をする必要がなくなる
  • 受け取ったページのロード時間を短縮するための技術
  • SEO対策に有効

・・・・・:rolling_eyes::question: となった方、安心してください。これから、いろいろな描画方法を比較してSSRを理解していきます。

描画方法の種類

今回は、下記の3つの描画方法を比べながらSSRの仕組みやメリットを説明していきます。

  1. シンプルなHTMLサイト
  2. クライアントレンダリング(CSR)
  3. サーバーサイドレンダリング(SSR)

1. シンプルなHTMLサイト

シンプルなサイトでは、まずサイト内のそれぞれのルート(URL)にHTMLファイルを用意します。ユーザがHTTPリクエストを送信すると、サーバーは用意されたHTMLファイルを返します。ブラウザ(クライアントPC)はサーバから受け取ったコードをユーザが理解できる様に描画し、コンテンツを提供します。

これらの手順を表すと、下記の様になります。

  1. 【開発者側】 HTML、CSS、JSを構築する
  2. 【開発者側】 1のファイルをサーバーに置く
  3. 【クライアントPC】 HTML、CSS、JSをサーバーからダウンロードする
  4. 【クライアントPC】 PC画面にコンテンツを表示する

image.png
出典:Unicorn Utterances

これはとてもシンプルですね。次は、コンポーネントベースのフレームワークを使うとどうなるかみてみます。

2. クライアントサイドレンダリング (CSR)

クライアントサイドレンダリングは、Angular、React、Vueのサイトではデフォルトの設定です。今回はReactサイトを例に上げてみます。

NextJSやGatsbyなどのフレームワークを使わずにReact SPAを構築すると仮定すると、下記の様な手順になります。

  1. 【開発者側】 Reactコードを書く
  2. 【開発者側】 サーバにReactコードを置く
  3. 【クライアントPC】 データをリクエストする
  4. 【クライアントPC】 Reactコードをサーバからダウンロードする
  5. 【クライアントPC】 クライアントPCでReactコードが実行され、HTML・CSSが生成される
  6. 【クライアントPC】 **Reactが実行されてから、**ユーザのPCのスクリーンにコンテンツが表示される

image.png
出典:Unicorn Utterances

CSRの特徴

CSRの特徴は、クライアントPC側でHTML・CSSを生成する時にReactコードが実行されることです。

と言うことは、リクエストを送信〜Reactコードの実行が終わるまで、ユーザはリクエストしたページを見ることができません。サーバにリクエストを送ってHTML・CSSを生成している間、ユーザに何を見せておくべきでしょうか?

ローディングスピナーを用意して置いて、描画されるまでそれを表示するのもいいかもしれません。
image.png
でも、ローディングスピナーは、ユーザには何のメリットもありませんよね。また、小さなアプリの場合は有効かもしれませんが、たくさんのコンポーネントがある場合には問題になってきます。

そこで出てくるのがSSRです!

3. サーバーサイドレンダリング(SSR)

Reactがどこかで実行されないといけないのだとしたら、サーバーで実行させるようにすればいいのでは? ということで、ユーザがリクエストをする度にサーバーでReactのインスタンスを作り、描画されたHTML、CSSをユーザに渡す。これがSSRです。

流れは下記のようになります。

  1. 【開発者側】 Reactコードを書く
  2. 【開発者側】 サーバにコードを置く
  3. 【クライアントPC】 クライアントがデータをリクエストする
  4. 【サーバ側】 サーバがReactコードを実行し、サーバ側でHTML/CSSを生成する
  5. 【サーバ側】 生成されたHTML/CSSを送り返す
  6. 【クライアントPC】 PC画面にコンテンツが表示される。ReactはユーザのPCで実行される必要がない

image.png
出典:Unicorn Utterances

SSRのメリット

SSRには下記の様なメリットがあります。

  • SEO対策:検索エンジンは完全に描画されたページを見るため、SSRはSEO対策ができる。(詳細はこちらのMedium記事(英語)を読んでみてください。)

  • (特に速度が遅いインターネット環境や機器での)コンテンツ描画の高速化:サーバー側で描画されるHTML・CSSはJavaScriptがダウンロード&実行される必要がありません。そのため、ユーザは短い時間で完全に描画されたページを見ることができます。結果的にユーザー満足度や、コンテンツの描画速度がコンバージョン率に直結するアプリケーションの場合に有効。

  • データを取り出している間にローディングスピナーをユーザのPCのスクリーンに毎回表示する代わりに、「Reactで生成したHTMLを送るまで何も表示しない」ことができるようになる

  • サーバとデータベースが同じホスティング上にあれば、イントラネット外エラーを回避することができる。よって、さらに早くて信頼性のある接続の描画ができるようになる

SSRの注意点

メリットが多いSSRですが、下記の様な点に注意する必要があります。

  • 開発中の制約:ブラウザに特化したコードは、特定のライフサイクルフックでしか動かない可能性がある。外部ライブラリなど、SSRアプリで動く様に修正が必要な場合があるので注意
  • サーバー側でのロード: Node.jsでフルアプリを描画することは、静的なファイルだけを扱うよりもCPU使用率が高くなる。そのため、負荷の高いトラフィックを考慮したサーバーのロードやキャッシュ戦略を行う必要がある

メリット・デメリットまとめ

これまでを踏まえ、シンプルなHTMLサイト、CSR、SSRのメリット・デメリットをまとめました。

ツール メリット デメリット
シンプルなHTMLサイト
  • 早い
  • スケールしにくい
Client Side Rendering (CSR)
  • スケールしやすい
  • 開発しやすい
    • JS実行が遅い
    • SEOが心配
      Server Side Rendering (SSR)
      • SEO対策がしやすい
      • クライアントPC側でJSが有効である必要がない
      • クエリーベースで最適化できる
      • サーバロードが重い
      • 特定のサーバが必要
      • CSRよりも開発が大変

      まとめ

      以上、SSRの説明でした。

      SEO対策が必要でないのであれば、CSRを選んでも良いかもしれません。どちらにせよ、どんな描画方法で開発するかは、プロジェクトを始める前にしっかり選定した方が良さそうです。

      宣伝: Railsアプリの作り方を学べる教材を公開しています

      Techpit様にて、Ruby on RailsとVue.jsでリアルタイムチャットアプリを作る教材を公開しています。
      Ruby on Railsのdevise_token_authを使ったトークン認証、HTTP通信やAction Cableを使用したWebsocket通信についても詳しく説明しています。Vue.jsに関しては基礎から丁寧に説明しているので、JavaScriptの基礎がある方であれば理解できる内容になっています。

      Vue.js ✖️ Rails APIモードでアプリケーションを作って見たい方はぜひ購入してください!

      参考

      46
      32
      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
      46
      32

      Delete article

      Deleted articles cannot be recovered.

      Draft of this article would be also deleted.

      Are you sure you want to delete this article?