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

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

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

## SSRってなんだろう
簡単に、SSRの説明です。

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

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

## 描画方法の種類

今回は、下記の３つの描画方法を比べながら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](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/352778/151290a1-f711-a07d-b9bf-e94035595e9f.png)
出典：[Unicorn Utterances](https://unicorn-utterances.com/)

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

## 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](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/352778/48a61de2-81e6-8303-eea9-004f525f4d40.png)
出典：[Unicorn Utterances](https://unicorn-utterances.com/)

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

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

ローディングスピナーを用意して置いて、描画されるまでそれを表示するのもいいかもしれません。
![image.png](https://reactnativeexample.com/content/images/2017/08/react-native-loading-spinner-overlay.gif)
でも、ローディングスピナーは、ユーザには何のメリットもありませんよね。また、小さなアプリの場合は有効かもしれませんが、たくさんのコンポーネントがある場合には問題になってきます。

そこで出てくるのが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](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/352778/80405a31-9432-5e55-2b5d-615fe21e4e44.png)
出典：[Unicorn Utterances](https://unicorn-utterances.com/)

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

- **SEO対策**：検索エンジンは完全に描画されたページを見るため、SSRはSEO対策ができる。（詳細は[こちらのMedium記事（英語）](https://medium.com/@benjburkholder/javascript-seo-server-side-rendering-vs-client-side-rendering-bc06b8ca2383)を読んでみてください。）

- **（特に速度が遅いインターネット環境や機器での）コンテンツ描画の高速化**：サーバー側で描画されるHTML・CSSはJavaScriptがダウンロード＆実行される必要がありません。そのため、ユーザは短い時間で完全に描画されたページを見ることができます。結果的にユーザー満足度や、コンテンツの描画速度がコンバージョン率に直結するアプリケーションの場合に有効。
- データを取り出している間にローディングスピナーをユーザのPCのスクリーンに毎回表示する代わりに、「Reactで生成したHTMLを送るまで何も表示しない」ことができるようになる
- サーバとデータベースが同じホスティング上にあれば、イントラネット外エラーを回避することができる。よって、さらに早くて信頼性のある接続の描画ができるようになる


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

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

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

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

## まとめ
以上、SSRの説明でした。

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

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

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

https://www.techpit.jp/courses/195

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


## 参考
- [What is SSR](https://quasar.dev/quasar-cli/developing-ssr/introduction)
- [SSR with React](https://medium.com/@swazza85/ssr-with-react-9cb197cfe380#:~:text=SSR%20stands%20for%20Server%20Side,a%20request%20to%20a%20URL)
- [How to SSR in a serverless environment and make your visitors 400% happier! 🏎](https://medium.com/hackernoon/how-to-ssr-in-a-serverless-environment-and-make-your-visitors-400-happier-5a2a101ecb15)
- [What is SSR and Why You Need it](https://appradius.co/blog/what-is-ssr-react-ssr-next-js-zeit)