はじめに
この記事では、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モードの違いをもっと知りたいという方は、この方が詳しくまとめてくれています。ご参考までに。
参考
感謝いたします。(Google翻訳にも感謝いたします)
-
Best Practices for Nuxt.js SEO (自分的に、ここが一番勉強になりました。NuxtとSEO、メタタグの設定方法について書いてくれています)
-
ユーザー体験を向上させるサーバーサイドレンダリングJavaScript — 歴史と利点(ここも柔らかく説明してくださっています。おすすめです)
(補足)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](