【Nuxt.js】のSSRモードの開発時の注意点（SSRとCSRの説明〜）

Nuxt.jsで開発していると、SSR（サーバーサイドレンダリング）なのか、CSR（クライアントサーバーレンダリング）なのかで、エラーになったり、ならなかったりと頭を悩まされることがありました。
今回はそのCSRとSSRのそれぞれの説明と、実際に体験したNuxt.jsの実装する際にハマった点とその時の対処法についてです。

CSRとは

英語で表記するとClient Side Renderingであり、頭文字を取ったものがCSRであります。
クライアントサイドで、サーバーに持っている情報（DBのデータなど）を非同期で必要部分を取得して、画面描画を行います。
クライアントサイドで、レンダリングするため画面描画が早いです。
しかし、初回リクエスト時は描画に必要な情報が多いため、初回の描画が遅いといったデメリットもあります。

SSRとは

英語で表記すると、Server Side Renderingであり、頭文字を取ってSSRであります。
サーバーはクライアントからリクエストが来たら、DBからデータ取得などの処理をして、それを元にHTMLを構築して、ブラウザに返して、画面は表示されます。
Nuxt.jsのSSRは、初回のリクエストは、サーバーサイドで上記の操作を行い、画面が描画されます。
画面遷移時は<nuxt-link>での遷移ならCSRとなります。
そのため、先ほどの「CSRとは」で説明しました、クライアント側でまっさらな状態からDOMを構築するよりも画面描画が速くなります。
CSRの欠点である、「初回描画が遅い」を解消してくれる機能となります。
また、サーバーからHTMLが返されてくるため、検索エンジンのクローラが解析可能であり、SEOが向上します。

Nuxt.jsのSSR（universal）モードの注意点と対処法

SSRを使えば、初回描画速度、SEO対策とメリットが大きいですが、もちろんデメリットもあります。
そのデメリットとして、よく言われるのが実装が難しいです。
CSRの時、SSRの時と処理を分けてコーディングをしないと、画面遷移（CSR）では問題なく画面が描画されるが、同じ画面を初回リクエスト（SSR）時にはエラーとなって、画面描画できないという場面がありえます。

遭遇したエラーの例が下記のようなコードの時でした。

created() {
  this.hoge = sessionStorage.fuga
}

画面で表示してみると、CSRの時は正常に表示されるのですが、同じ画面をリロードしてみると、「sessionStorage is not defined」と言われ、SSRの時はエラーとなってしまいました。
いろいろ調べてみると、createdは、SSR、CSR両方とも動作します。
SSRの場合は、このsessionStorageが使用できないため、エラーとなっていました。
他にも、localStorage、window、documentも、同様にSSRの場合はエラーとなります。

対応策

この時の対応方法としては、下記のようにしました。

created() {
  if (process.browser) {
    this.hoge = sessionStorage.fuga
  }
}

条件分を追加し、CSRの時なら、処理するといった形で対応できました。
CSRの時は動作するけど、SSRの時に「XXX is not defined」というエラーとなる場合は、SSRでは動作しないコードが含まれていないか、疑ってみると良いです。

まとめ

CSR、SSRの説明と、Nuxt.jsのSSRモードの開発でCSR、SSRで引っかかった点と対応策について書いてきました。

・CSR
遷移前の画面からの差分のみを更新するため、画面遷移時の画面描画が速い。
しかし、初回画面描画は、一から画面情報をクライアント側で生成となるため、遅い。

・SSR
サーバー側でHTMLを構築したものをクライアントに返し、クライアントは受け取ったHTMLを画面上に表示する。
Nuxt.jsのSSRモードは、画面描画時はSSRで描画し、画面遷移はCSR。
そのため、CSRのデメリットである初回画面描画を解消できる。また、SRO対策にもなる。
しかし、実装難易度が高い。

・Nuxt.jsのSSRモードの実装時の注意点と対応策
画面をリロード（SSR）の時に「XXX is not defined」となる場合は、created内にSSRでは使用できないオブジェクトを使用している可能性あり。（例.window、document、localStorage、sessionStorageなど）
if (process.browser)で、CSRの場合（true）、SSRの場合（false）と条件分岐させて対処。

実装する時に心掛けていることとして、まずはCSRで動作することを確認してから、実装した画面をリロードして、SSRの場合でもエラーとならないことを確認するようにしています。
以上です。