Nuxt.jsでSPA, SSR, SSGの違いと設定方法について

NuxtJSで「SPA」「SSR」「SSG」をそれぞれ設定するには、nuxt.config.jsのssrtargetプロパティを変更します。SPAを構築する場合は、targetプロパティは不要です。

SPA(シングルページアプリケーション)とSSRの違い

SPAはクライアントサイドレンダリングです。SPAとSSRをビルドすると、生成されるDOM構造が異なります。(大量のJavaScript)これがSEOに影響を与えると言われています。SPAはHTMLファイルも1つだけでJSでページ遷移をしているように見せています(挙動を変えています)。それがSPAのメリットでもあり、初期ロードに時間がかかりますが、複雑なUIを構築したり、初期ロード以外は高速にする事ができます。また、SPAの場合、インフラ環境にそれほど影響を受けないこともメリットでしょう。(CSRのため)

CSR(Client Side Rendering): クライアント側で実行されるJavaScriptと思えば良いかも

SSR(サーバーサイドレンダリング)

SSRを行う場合は、Node.jsの環境が必要になります。リクエストごとにHTMLを生成して返すからです。Node.js環境の準備は、Herokuが低価格で使用しやすいです。また、VercelCloud Runといった選択肢もあります。個人的におすすめは、東京リージョンのあるCloud Runです。Herokuはリージョンの設定が個人レベルではできないこと。VercelとCloud Runを比較して、Cloud Runの方がパフォーマンスが良かったことが挙げられます。もちろん料金とも相談しましょう。

SSG(静的サイトジェネレーター)

SSGはプリレンダリングです。静的ファイルのみなのでNetlifyやVercel、GitHub Pagesなどが良いでしょう。JAMStackと言われれるアプリケーションはSSGに当たります。環境に関しては、Node.js環境を必要としません。その代わり 設計によってはクライアント側に大きな負荷をかけやすい&動的コンテンツの実装は難しい(できないことはない)ので、優れた設計が必要です。CDNと相性が良いので、ホスティング先のリージョンは気にしなくて良いでしょう。VercelのCDNは、非常に強力に見えますが、Netlifyの扱いやすさを加味するとどちらも良い選択肢でしょう。

メリットとしては、

  • 高速(CDN配信)
  • セキュア(サーバを管理しない)

でしょうか。

各モードのデプロイ

公式のドキュメント(例) Deploy Nuxt on Netlifyで、各サービスへのデプロイ方法とstaticserver
どちらの環境で実行できるか整理されているので、見ておくと良いでしょう。

※Node.js: サーバーサイドJavaScript環境
※CDN : コンテンツデリバリーネットワーク(Content Delivery Network)

SPA・SSR・SSGの使い分け

  • HTML生成によるSEOをあまり気にしない&ページ内で複雑なUIを構築したい場合→SPA
  • 動的ページでSEOも気にする場合→SSR
  • 静的ページのみの場合→SSG

SPAの設定

ssr: false

mode: "spa"mode: "universal"は非推奨になりました。The mode Propertyを参照してください。

SSRの設定

ssr: true,
target: "server"

リクエスト毎にasyncDatafetchなどのSSR関数が呼び出されます。
状態の永続化やルーティング毎の設定に優れています。

SSGの設定

ssr: true,
target: "static"

nuxt generate時に、一度だけasyncDatafetchなどのSSR関数が呼び出されます。createdbeforeCreateはCSRなので、ここでAPIを呼び出すことができます。従って、静的ホスティングでもAPIを連携することは可能です(例えば、AlgoliaやStripe)。しかし、動的なコンテンツが大きくなればなるほど、クライアントに負荷がかかります。また挙動にも困るケースが増えるでしょう。その場合、SSRを検討した方が良いかもしれません。

SSRの関数の挙動

SSRを選択した場合、基本的にSSR時に呼び出される関数の中で処理を行うことになります。また、Netlifyなどは静的サイトのホスティングサービスなので、SPAやSSGの作り方で動作しないことがあります。NuxtJSのライフサイクルをよく理解して実装することが大事になってきます。Nuxt Lifecycleが理解を深めてくれます。

SSR

nuxtServerInit
plugins
middleware
asyncData
fetch
beforeCreate
created

CSR

plugins
beforeCreate
created
beforeMount
mounted

まとめ

実際に大事なことは、目的に沿って最大限にパフォーマンスを発揮することです。ユーザーが何を重視するかによって、選択する方式は異なってきます。もっとも柔軟な選択肢は、SSRです。なぜSPAにするのかSSGにするのかといったところを深掘りすることで、開発物のコアバリューがわかるかもしれません🚀

via GIPHY