Nuxt.jsの3つのモード(SSR、SPA、プリレンダリング)のメリットとデメリットについて
Nuxt.jsの3つのモード(SSR、SPA、プリレンダリング)のメリットとデメリットについて紹介します。
Nuxt.jsで作れるもの
Nuxt.jsでは、次のモードを選択できます。
- Universal App（SSR)
- Single Page App（SPA）
- Static App（プリレンダリング）
SSR、SPA、プリレンダリングの違い
Universal App（SSR)
Universal App（SSR)は、ファーストビューが動的にサーバーサイドでレンダリングされます。
最初のロードが完了したら、その後はSPAと同じです。
メリットとしては、
- SEO的なメリットがある
- 初回読み込みもページ表示も早い
- 通信環境に左右されにくい
デメリットとしては、
- サーバー側に負担が増える
また、注意点としては、フロントエンドでのエラーハンドリングが重要になります。
そして、デメリットというほどでもありませんが、Node.jsのサーバーが必要になります。
Single Page App（SPA）
Single Page App（SPA）は、通常のVue.jsのアプリと同じです。最初のロード後にアプリがスタートするシングルページのみのアプリケーションです。
クライアントサイドでレンダリングされて、クローラーがその処理を待たないため、SEOでは不利になります。
通常のVue.jsと同じではありますが、Nuxt.jsのディレクトリ構造のメリットを活かすことができます。
メリットとしては、
- 2回目以降の表示速度が早い
デメリットとしては、
- 初回の読み込みが遅い
- SEO的に不利
初回はJavaScriptのコードがどうしても増えるので読み込みに時間がかかります。
ただし、2回目以降は差分のデータをHTTPリクエストで要求するだけで、サーバーからのレスポンスもjsonデータで軽いです。
Static App(プリレンダリング)
Static App(プリレンダリング)は、ビルドのときにページごとのhtmlファイルを生成します。
SSRとの違いは、SSRはクライアントからリクエストがあったときにサーバーを使用してhtmlを生成するのに対し、Static Appのプリレンダリングは、ビルド時にhtmlファイルを生成します。
メリットとしては
- 表示が高速
- Node.jsが動作するサーバーも不要
- SEO的にメリットあり
デメリットとしては
- ページ数が多いアプリには向かない
ページ数が大量にあるとhtmlファイルがそれだけ生成する必要があるので、向いていません。