12
2

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.

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

Last updated at Posted at 2020-08-31

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が使用できないため、エラーとなっていました。
他にも、localStoragewindowdocumentも、同様に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の場合でもエラーとならないことを確認するようにしています。
以上です。

12
2
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
12
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?