Nuxt.jsでSPA, SSR, SSGの違いと設定方法について
NuxtJSで「SPA」「SSR」「SSG」をそれぞれ設定するには、nuxt.config.jsのssrとtargetプロパティを変更します。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が低価格で使用しやすいです。また、VercelやCloud 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で、各サービスへのデプロイ方法とstatic かserver
どちらの環境で実行できるか整理されているので、見ておくと良いでしょう。
※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"
リクエスト毎にasyncDataやfetchなどのSSR関数が呼び出されます。
状態の永続化やルーティング毎の設定に優れています。
SSGの設定
ssr: true, target: "static"
nuxt generate時に、一度だけasyncDataやfetchなどのSSR関数が呼び出されます。createdやbeforeCreateは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にするのかといったところを深掘りすることで、開発物のコアバリューがわかるかもしれません🚀