NuxtJSではSSR？SPA？

初めまして、ししゃもです。
noteへの初投稿は最近どっぷりとハマっているNuxtJSでのプロジェクト作成について。
Clからプロジェクトを作成する時にRendering modeとDevelopment targetでいつも「どれにすべきか」と迷います。SSRだのSPAだの、ServerだのStaticだのと質問されるのだけれど、毎回悩んでいてはいけないので自分なりに調べてまとめてみました。

SSRはレンダリングの仕組み

まずSSRとは何なのか。対極にあるCSRと比較してみます。

SSR

Server Side Renderingの略で、レンダリングをサーバー側で行ってからクライアント側で表示をするという仕組み。レンダリングに必要なリソースはサーバーに揃っており、クライアントには必要最低限のリソースのみが送られてくるので描画が早いというメリットがある反面、サーバーにJavaScriptの実行環境であるNode.jsがないと動かないというデメリットがあります。
JavaScriptではなくPHPに置き換えれば理解しやすいかも？

CSR

Client Side Renderingの略で、レンダリングをクライアント側で全て行う仕組み。APIも含めてレンダリングに必要なリソースを全てサーバーから受け取ってクライアントが処理するため、SSRと比較して初期表示に時間がかかるというデメリットがある反面、サーバーにはNode.jsが必要ないというメリットがあります。

その他SSGといったレンダリングの仕組みもありますが、ここでは割愛。

SPAはどちらでもない

レンダリングの仕組みを概ね理解できたところで、それじゃSPAはCSRなのかというと、実はどちらでもないというのが私の認識です。

SPAはSingle Page Applicationの略で、ページ内の一部のコンテンツを動的に入れ換える（再描画する）ようにすることで、ページ全体を読み込み直すよりも高速にコンテンツを更新できる仕組みです。
つまり、SSRとCSRがレンダリングをサーバーとクライアントのどちらで行うかという違いであるのに対し、SPAはページ内のコンテンツをどのように再描画するかという仕組みであり、SSRでもCSRでもSPAを実装することは可能なんです。

SSR+SPA

クライアントからリクエストを受け取ると、サーバーはレンダリングを行なってHTMLやCSSなどをクライアントに返します。APIなどによる外部情報の取得もサーバーで行われますが、一旦表示されたコンテンツの一部を入れ替える場合はクライアント側で処理されます。

CSR+SPA

クライアントからのリクエストを受け取ると、サーバーはレンダリングに必要なリソースを全てクライアントに返します。クライアントは受け取ったリソースをもとにレンダリングを行います。

つまり、APIなどを使った情報取得が、初回のみサーバーで実行される（同一URLで2回目以降はクライアントで実行される）のがSSR、初めからクライアントで実行されるのがCSRという認識で良いと思います。

「だったら全部CSRでいいのでは？」と思われるかもしれませんが、SSRの「初回表示が高速」というのはユーザビリティの面で大きなメリットです。サーバーにNode.jsがあるのであれば、基本的にはSSRの選択で良いと思います。
対して、Firebaseなどのホスティングサービスを利用するのであればCSRを選択することになると思います。

結局NuxtJSならどうする？

そもそもSSRとSPAを同列に並べて選択させるから混乱するわけで、NuxtJSを使っている時点で、そのアプリはSPAじゃないかと。
Rendering modeとDevelopmet targetについては以下のようにすれば問題ないと思います。

Rendering mode

デプロイ先にNode.jsがないのであればSPA（CSR）、あるのであればUniversal（SSR）でOK。

Development target

デプロイ先にNode.jsがないのであればStatic、あるのであればServerでOK。

プロジェクトの設定はこれでいいとして、いざビルドするとなると設定に合わせたコマンドを使わなくてはならないという話は別の機会にします。

本稿がどなたかの助けになれば幸い🐟