コラム 3. プログラミング情報
2019年10月03日に更新

Nuxt.jsのUniversalモードとSPAモードの大きな違い

はじめに

この記事では、NuxtjsのUniversalモードとSPAモードの違いをざっくりと説明しています。

厳密な説明を避けていますので、認識の違いがあるかもしれません。

ご注意ください。

モードの大きな違い

Universal(ユニバーサルモード)

ssr(サーバーサイドレタリング)を行います。

Single Page App(シングルページアプリケーションモード)

略してSPAとも言われます。

ssrを行いません。

SSR(サーバーサイドレタリング)とは

javascriptのレタリング方法の一つです。

言葉の通り、サーバー側でjavascriptをレタリングしHTMLを生成します。

SSRを行わない場合

クライアント側(ブラウザ側)でjavascriptをレタリングしHTMLを生成します。

初めて訪れたサイトで、真っ白い画面でくるくる回って待たされることありませんか?

あれはjavascriptをレタリングし、HTMLを生成している状況です。

SSRを行うと何が嬉しいの?

  • SEO対策に有効です。

    • クローラがサーバー側でレタリングしたHTMLを読み込むので、検索に最適な情報を送ることができます。
    • 逆にSPAモードでは、ユーザーがサイトを訪れるまでHTMLファイルは空っぽの状態です。クローラは空っぽのHTMLファイルを読みに行くので、検索に必要な情報を渡すことができません。(Googleのクローラはjsをレタリングして読み込めるようです)
  • ユーザーを待たせません。

    • 予めサーバー側でレタリングされていますので、直ぐにHTMLを表示することができます。

Nuxtでブログを作る場合に最適なモードは?

Universalモードです。

クローラに全ページのメタ情報やOGPの情報を正しく渡すことができます。

サーバー側でレタリングしたHTMLの情報をクローラに渡しているからですね。

Googleクローラはjsをレタリングしてページ毎のメタ情報を読み込んでいるようですが、TwitterやFacebookのクローラはまだ読み込めないようです。
Vue.jsで構築したSPAをNuxt.jsで書き直して静的に出力するときにコケたところ

OGPとは?

SNS上でサイトの内容を伝えるための情報のことです。

LINEでURLを貼り付けると、サイトの写真やそのURLの情報が勝手に送信されますよね。

あれはOGPの情報を読み込んで生成しています。

まとめ

SEO対策を重要視するアプリケーションでは、Universalモードで作っておけば間違いないと思います。

もちろん、SPAモードにも利点があります。

UniversalモードとSPAモードの違いをもっと知りたいという方は、この方が詳しくまとめてくれています。ご参考までに。

Nuxt.jsを使うときに、SPA・SSR・静的化のどれがいいか迷ったら - Qiita

参考

感謝いたします。(Google翻訳にも感謝いたします)

  • Best Practices for Nuxt.js SEO (自分的に、ここが一番勉強になりました。NuxtとSEO、メタタグの設定方法について書いてくれています)

(補足)Universalモードで「document is not defined」エラーの理由

Universalモードの場合、Javascriptの命令文「document」や「window」はエラーになります。

そもそもこの命令文は、クライアント(ブラウザ)側で動くものです。

Nuxtがサーバー側でレタリングする際に、クライアント(ブラウザ)は存在しませんので「document」や「window」は当然動きません。

よってエラーを吐き出すわけです。

ただ、全く利用できないわけではありません。

クライアント側の命令文を利用するには、<no-ssr>タグで囲むなどの方法があります。

参考

“document is not defined” in Nuxt.js - stackoverflow
window または document が undefined のときは? - Nuxt.js

現在、カテゴリー「Rails apiとNuxt.jsでSPA開発」のデモアプリを構築中です。記事になるまでもう少々のお時間が必要です。ブログの更新が止まって申し訳ありません。デモアプリの進捗状況は こちらの記事 で随時お伝えしてまいります。
スポンサー広告
スポンサー広告