Nuxt.jsで開発していて、SSRってなんじゃーーーい！！
サーバー側でHTMLとやらが描画されるからどうなるんじゃーーーい！！という疑問が拭えなかったので、SSRについて調べてみました。
SSRってなんだろう
簡単に、SSRの説明です。
- サーバーサイドレンダリング（Server Side Rendering）の略語
- サーバーがブラウザに描画されたデータをブラウザに直接送信する。ブラウザ側でデータを入手するためにAPIを呼び、DOM操作をする必要がなくなる
- 受け取ったページのロード時間を短縮するための技術
- SEO対策に有効
・・・・・
となった方、安心してください。これから、いろいろな描画方法を比較してSSRを理解していきます。
描画方法の種類
今回は、下記の３つの描画方法を比べながらSSRの仕組みやメリットを説明していきます。
- シンプルなHTMLサイト
- クライアントレンダリング（CSR）
- サーバーサイドレンダリング（SSR）
1. シンプルなHTMLサイト
シンプルなサイトでは、まずサイト内のそれぞれのルート（URL）にHTMLファイルを用意します。ユーザがHTTPリクエストを送信すると、サーバーは用意されたHTMLファイルを返します。ブラウザ（クライアントPC）はサーバから受け取ったコードをユーザが理解できる様に描画し、コンテンツを提供します。
これらの手順を表すと、下記の様になります。
- 【開発者側】 HTML、CSS、JSを構築する
- 【開発者側】 1のファイルをサーバーに置く
- 【クライアントPC】 HTML、CSS、JSをサーバーからダウンロードする
- 【クライアントPC】 PC画面にコンテンツを表示する
これはとてもシンプルですね。次は、コンポーネントベースのフレームワークを使うとどうなるかみてみます。
2. クライアントサイドレンダリング (CSR)
クライアントサイドレンダリングは、Angular、React、Vueのサイトではデフォルトの設定です。今回はReactサイトを例に上げてみます。
NextJSやGatsbyなどのフレームワークを使わずにReact SPAを構築すると仮定すると、下記の様な手順になります。
- 【開発者側】 Reactコードを書く
- 【開発者側】 サーバにReactコードを置く
- 【クライアントPC】 データをリクエストする
- 【クライアントPC】 Reactコードをサーバからダウンロードする
- 【クライアントPC】 クライアントPCでReactコードが実行され、HTML・CSSが生成される
- 【クライアントPC】 **Reactが実行されてから、**ユーザのPCのスクリーンにコンテンツが表示される
CSRの特徴
CSRの特徴は、クライアントPC側でHTML・CSSを生成する時にReactコードが実行されることです。
と言うことは、リクエストを送信〜Reactコードの実行が終わるまで、ユーザはリクエストしたページを見ることができません。サーバにリクエストを送ってHTML・CSSを生成している間、ユーザに何を見せておくべきでしょうか？
ローディングスピナーを用意して置いて、描画されるまでそれを表示するのもいいかもしれません。
でも、ローディングスピナーは、ユーザには何のメリットもありませんよね。また、小さなアプリの場合は有効かもしれませんが、たくさんのコンポーネントがある場合には問題になってきます。
そこで出てくるのがSSRです！
3. サーバーサイドレンダリング(SSR)
Reactがどこかで実行されないといけないのだとしたら、サーバーで実行させるようにすればいいのでは？ ということで、ユーザがリクエストをする度にサーバーでReactのインスタンスを作り、描画されたHTML、CSSをユーザに渡す。これがSSRです。
流れは下記のようになります。
- 【開発者側】 Reactコードを書く
- 【開発者側】 サーバにコードを置く
- 【クライアントPC】 クライアントがデータをリクエストする
- 【サーバ側】 サーバがReactコードを実行し、サーバ側でHTML/CSSを生成する
- 【サーバ側】 生成されたHTML/CSSを送り返す
- 【クライアントPC】 PC画面にコンテンツが表示される。ReactはユーザのPCで実行される必要がない
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） |
|
|
| Server Side Rendering (SSR) |
|
|
まとめ
以上、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モードでアプリケーションを作って見たい方はぜひ購入してください！