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の場合でもエラーとならないことを確認するようにしています。
以上です。