Nuxt.js SPAとSSRの違い

Question

Nuxt.jsで最初にインストールするときにSPAとSSRの選択をする様に指示されていたのですが、どちらの方が表示速度が早いのでしょうか？またSSRでは実装が少し面倒と言われることもある様ですが、それはなぜでしょうか？

参考にしたページ

Answer 1

SPAとSSRの違いについて、まず学習される必要があります。

• SPA: Single Page Application
• SSR: Server Side Rendering

詳細は、「https://qiita.com/amakawa_/items/e7d0720e1ab8632769bf」などをご参照ください。

どちらの方が表示速度が早いのでしょうか？

初期表示速度については、一般的にSSRの方が速いかと思います。
といってもJSコードの構成によってはそこまで初期表示速度について差分を感じることはないかと思います。

またSSRでは実装が少し面倒と言われることもある様ですが、それはなぜでしょうか？

SSRはその名のとおり、サーバーサイドでレンダリングを行います。
Nuxt.jsをUniversal (SPA) モードと比べて、SSRモードで利用する場合は、以下のことを気にする必要があります。

• Nodejs環境の構築

Universal (SPA) モードは静的なファイル構成になるので、単体でも実行可能です。
一方、SSRモードはNodejs環境にデプロイし、Nodejsアプリケーションとして実行する必要があります。

• クライアントサイドの処理とサーバサイドの処理を意識して使い分ける

サーバサイドでHTMLをレンダリングするため、たとえばwindow.locationなどのjsコードは、サーバサイドでは実行できません。クライアントサイドでのみ実行されるよう、<client-only/> タグを利用するなど、確実にクライアントサイドでのみ実行されるよう、実装に注意が必要です。

他にも色々注意点はありますが、質問にあった面倒な事項の例を紹介させていただきました。

まとめですが、UniversalモードとSSRモードは要件によって使い分けるのが良いかと思います。
どちらもメリット/デメリットがありますので、検討されてみてはいかがでしょうか。

Comments

[退会済みユーザー]

> 一方、SSRモードはNodejs環境にデプロイし、Nodejsアプリケーションとして実行する必要があります。

これは yarn devのことを指しているのでしょうか？

[yuhigash]

簡単にいえば、その認識で問題ございません。

「yarn dev」は「yarn」というパッケージマネージャを用いて、package.jsonに登録してある「dev」スクリプトを実行するコマンドになります。
これは、「yarn」によってNodejsアプリケーションを実行していることを意味します。

例えば本番環境でこのようなNodejsアプリケーションを動かしたい場合は、サーバ側でNodejsアプリケーションが実行されている状態にしておかなければなりません。

html + css + javascriptなどの静的なファイルの実行では、httpサーバの準備だけで事足ります。
一方でNodejsアプリケーションの実行の場合、httpリクエストの受付だけでなく、Nodejs環境の構築 + Nodejsアプリケーションの実行が必要になります。