Nuxt.jsの3つのモード(SSR、SPA、プリレンダリング)のメリットとデメリットについて

Vue.js

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ファイルがそれだけ生成する必要があるので、向いていません。

Vue.js

Posted by devsakaso