【Nuxt】SSR・SSG・SPAにおける『nuxt build』と『nuxt generate』の実行結果の違いまとめ

JavaScript

こんにちは。Enjoy IT Life管理人の@nishina555です。

NuxtにはSSR（Server Side Rendering）、SSG（Static Site Generator）1、SPA（Single Page Application）の3種類のモードが用意されています。

また、本番環境でNuxtアプリケーションを実行するにあたりnuxt buildとnuxt generateの2つのコマンドが用意されています。

nuxt buildはアプリケーションをWebpackでビルドし、JSとCSSをミニファイするコマンド2です。ビルドファイルの出力先は.nuxt配下です。

nuxt generateは静的ウェブサイトへデプロイする静的ファイルを生成するコマンド2です。静的ファイルの出力先はdist配下です。
静的ウェブサイトのホスティングサービスではNetlifyやAmazon S3などが有名です。

SSRでアプリケーションを運用する場合、nuxt buildでファイルをビルド後、nuxt startでNuxtアプリケーションをサーバー上で起動という流れになります。
一方、SSGやSPAではnuxt generateで静的ファイルを生成後、静的ウェブサイトにアップロードするという流れになります。

では、SSGでnuxt buildを実行したりSSRでnuxt generateを実行したりしたらどうなるでしょうか。

今回はSSR・SSG・SPAにおけるnuxt buildとnuxt generateの出力の違いについて紹介します。
なお、Nuxtは2.14.1を利用します。

NuxtにおけるSSR・SSG・SPAの設定方法について

Nuxtではnuxt.config.jsのmodeプロパティとtargetプロパティによってアプリケーションのモードが管理されています。
modeにはuniversalとspa、targetにはserverとstaticの設定値が用意されています。

modeをspaにするとSPAになります。
modeをuniversalにした場合、targetをstaticにすればSSG、targetをserverにすればSSRになります。

Nuxtアプリケーションのモードの初期設定は、新規作成時の対話の回答によって決定されます。
? Rendering mode:はmodeの設定値に関する質問、? Deployment target:はtargetの設定値に関する質問です。

検証に利用するサンプルアプリケーションについて

SSR・SSG・SPAにおけるnuxt buildとnuxt generateの挙動を確認するにあたり、今回はNuxt公式ドキュメントで紹介されているCustom Routesを利用します。

Custom Routesはユーザー一覧画面と各ユーザーの詳細画面が用意されているシンプルなアプリケーションです。

各パターンにおける実行結果の違いについて

2パターンのmode（universal・spa）と2パターンのtarget（server・static）を組み合わせた、計4パターンでnuxt buildとnuxt generateを実行しました。

以下にパターンごとの結果を掲載します。

『mode: universal』『target: server』の場合

SSRに該当するパターンです。

nuxt buildの実行ログは以下の通りです。

ℹ Production build
ℹ Bundling for server and client side
ℹ Target: server
✔ Builder initialized
✔ Nuxt files generated

✔ Client
  Compiled successfully in 5.36s

✔ Server
  Compiled successfully in 539.09ms


Hash: 5a5cd4d0c2a79cef9011
Version: webpack 4.44.1
Time: 5358ms
Built at: 2020/08/08 15:59:26
                          Asset       Size  Chunks                         Chunk Names
 ../server/client.manifest.json   7.83 KiB          [emitted]
                       LICENSES  389 bytes          [emitted]
                 app.dce2e9b.js   55.3 KiB       0  [emitted] [immutable]  app
node_modules/commons.48315ec.js    168 KiB       1  [emitted] [immutable]  node_modules/commons
         pages/index.9ce75e2.js   1.51 KiB       2  [emitted] [immutable]  pages/index
     pages/users/_id.5722ee2.js   1.45 KiB       3  [emitted] [immutable]  pages/users/_id
             runtime.84feac3.js   2.35 KiB       4  [emitted] [immutable]  runtime
 + 2 hidden assets
Entrypoint app = runtime.84feac3.js node_modules/commons.48315ec.js app.dce2e9b.js

Hash: 583b6fd0b31f116a80e2
Version: webpack 4.44.1
Time: 540ms
Built at: 2020/08/08 15:59:26
               Asset       Size  Chunks             Chunk Names
      pages/index.js   6.63 KiB       1  [emitted]  pages/index
  pages/users/_id.js   6.59 KiB       2  [emitted]  pages/users/_id
           server.js   86.6 KiB       0  [emitted]  app
server.manifest.json  307 bytes          [emitted]
 + 3 hidden assets
Entrypoint app = server.js server.js.map
ℹ Ready to run nuxt start
✨  Done in 9.20s.

実行ログをもとに、SSRモードのnuxt buildの内容をまとめると以下のようになります。

SSRモードにおける『nuxt build』の実行内容
  • サーバーサイドとクライアントサイドのビルドが実行される
  • Targetはserverに設定される

nuxt generateの実行ログは以下の通りです。

ℹ Production build
ℹ Bundling for server and client side
ℹ Target: static
✔ Builder initialized
✔ Nuxt files generated

✔ Client
  Compiled successfully in 5.25s

✔ Server
  Compiled successfully in 578.63ms


Hash: 413f8a0717bc47e1c0fb
Version: webpack 4.44.1
Time: 5253ms
Built at: 2020/08/08 16:01:35
                          Asset       Size  Chunks                         Chunk Names
 ../server/client.manifest.json   7.83 KiB          [emitted]
                       LICENSES  389 bytes          [emitted]
                 app.c20583b.js   55.5 KiB       0  [emitted] [immutable]  app
node_modules/commons.48315ec.js    168 KiB       1  [emitted] [immutable]  node_modules/commons
         pages/index.9ce75e2.js   1.51 KiB       2  [emitted] [immutable]  pages/index
     pages/users/_id.5722ee2.js   1.45 KiB       3  [emitted] [immutable]  pages/users/_id
             runtime.84feac3.js   2.35 KiB       4  [emitted] [immutable]  runtime
 + 2 hidden assets
Entrypoint app = runtime.84feac3.js node_modules/commons.48315ec.js app.c20583b.js

Hash: cef8c098609baff3310b
Version: webpack 4.44.1
Time: 579ms
Built at: 2020/08/08 16:01:35
               Asset       Size  Chunks             Chunk Names
      pages/index.js   6.63 KiB       1  [emitted]  pages/index
  pages/users/_id.js   6.59 KiB       2  [emitted]  pages/users/_id
           server.js   86.6 KiB       0  [emitted]  app
server.manifest.json  307 bytes          [emitted]
 + 3 hidden assets
Entrypoint app = server.js server.js.map
ℹ Generating output directory: dist/
ℹ Generating pages
✔ Generated route "/"
✔ Generated route "/users/3"
✔ Generated route "/users/5"
(略)
✔ Client-side fallback created: 200.html

実行ログをもとに、SSRモードのnuxt generateの内容をまとめると以下のようになります。

SSRモードにおける『nuxt generate』の実行内容
  • サーバーサイドとクライアントサイドのビルドが実行される
  • Targetはstaticに設定される
  • dist配下に各ページの静的ファイルが作成される

『mode: universal』『target: static』の場合

SSGに該当するパターンです。

nuxt buildの実行ログは以下の通りです。

ℹ Production build
ℹ Bundling for server and client side
ℹ Target: full static
✔ Builder initialized
✔ Nuxt files generated

✔ Client
  Compiled successfully in 6.34s

✔ Server
  Compiled successfully in 561.19ms

Hash: 009f5cce6a4034eb2970
Version: webpack 4.44.1
Time: 6345ms
Built at: 2020/08/08 15:51:05
                          Asset       Size  Chunks                         Chunk Names
 ../server/client.manifest.json   7.86 KiB          [emitted]
                       LICENSES  389 bytes          [emitted]
                 app.edced78.js   58.5 KiB       0  [emitted] [immutable]  app
node_modules/commons.501805f.js    168 KiB       1  [emitted] [immutable]  node_modules/commons
         pages/index.fe29326.js   1.51 KiB       2  [emitted] [immutable]  pages/index
     pages/users/_id.7d0c948.js   1.45 KiB       3  [emitted] [immutable]  pages/users/_id
             runtime.715f042.js   2.35 KiB       4  [emitted] [immutable]  runtime
 + 2 hidden assets
Entrypoint app = runtime.715f042.js node_modules/commons.501805f.js app.edced78.js

Hash: b97105c83cc5f7b09c53
Version: webpack 4.44.1
Time: 562ms
Built at: 2020/08/08 15:51:06
               Asset       Size  Chunks             Chunk Names
      pages/index.js   6.63 KiB       1  [emitted]  pages/index
  pages/users/_id.js   6.59 KiB       2  [emitted]  pages/users/_id
           server.js   87.7 KiB       0  [emitted]  app
server.manifest.json  307 bytes          [emitted]
 + 3 hidden assets
Entrypoint app = server.js server.js.map

ℹ Ready to run nuxt generate
✨  Done in 12.29s.

実行ログをもとに、SSGモードのnuxt buildの内容をまとめると以下のようになります。

SSGモードにおける『nuxt build』の実行内容
  • サーバーサイドとクライアントサイドのビルドが実行される
  • Targetはfull staticに設定される

nuxt generateの実行ログは以下の通りです。

✔ Skipping webpack build as no changes detected
ℹ Generating output directory: dist/
ℹ Generating pages with full static mode
✔ Generated route "/"
✔ Generated route "/users/4"
✔ Generated route "/users/6"
(略)
✔ Client-side fallback created: 200.html
✨  Done in 3.19s.

実行ログをもとに、SSGモードのnuxt generateの内容をまとめると以下のようになります。

SSGモードにおける『nuxt generate』の実行内容
  • dist配下に各ページの静的ファイルが作成される

『mode: spa』『target: server』の場合

デプロイ先をサーバーに指定したSPAです。

nuxt buildの実行ログは以下の通りです。

ℹ Production build
ℹ Bundling only for client side
ℹ Target: static
✔ Builder initialized
✔ Nuxt files generated

✔ Client
  Compiled successfully in 5.23s


Hash: 286e8db275c753c4ebd5
Version: webpack 4.44.1
Time: 5227ms
Built at: 2020/08/08 16:04:10
                          Asset       Size  Chunks                         Chunk Names
 ../server/client.manifest.json   7.79 KiB          [emitted]
                       LICENSES  389 bytes          [emitted]
                 app.43c0549.js   55.4 KiB       0  [emitted] [immutable]  app
node_modules/commons.48315ec.js    168 KiB       1  [emitted] [immutable]  node_modules/commons
         pages/index.9ce75e2.js   1.51 KiB       2  [emitted] [immutable]  pages/index
     pages/users/_id.5722ee2.js   1.45 KiB       3  [emitted] [immutable]  pages/users/_id
             runtime.84feac3.js   2.35 KiB       4  [emitted] [immutable]  runtime
 + 1 hidden asset
Entrypoint app = runtime.84feac3.js node_modules/commons.48315ec.js app.43c0549.js
ℹ Generating output directory: dist/
ℹ Generating pages
✔ Generated route "/"
✔ Client-side fallback created: 200.html
✨  Done in 8.36s.

実行ログをもとに、SPA（target: server）モードのnuxt buildの内容をまとめると以下のようになります。

SPA（target: server）モードにおける『nuxt build』の実行内容
  • クライアントサイドのビルドが実行される
  • Targetはstaticに設定される
  • dist配下にルート（/）の静的ファイル（index.html）が作成される

nuxt generateの実行ログは以下の通りです。

ℹ Production build
ℹ Bundling only for client side
ℹ Target: static
✔ Builder initialized
✔ Nuxt files generated

✔ Client
  Compiled successfully in 5.15s


Hash: 286e8db275c753c4ebd5
Version: webpack 4.44.1
Time: 5155ms
Built at: 2020/08/08 16:05:27
                          Asset       Size  Chunks                         Chunk Names
 ../server/client.manifest.json   7.79 KiB          [emitted]
                       LICENSES  389 bytes          [emitted]
                 app.43c0549.js   55.4 KiB       0  [emitted] [immutable]  app
node_modules/commons.48315ec.js    168 KiB       1  [emitted] [immutable]  node_modules/commons
         pages/index.9ce75e2.js   1.51 KiB       2  [emitted] [immutable]  pages/index
     pages/users/_id.5722ee2.js   1.45 KiB       3  [emitted] [immutable]  pages/users/_id
             runtime.84feac3.js   2.35 KiB       4  [emitted] [immutable]  runtime
 + 1 hidden asset
Entrypoint app = runtime.84feac3.js node_modules/commons.48315ec.js app.43c0549.js
ℹ Generating output directory: dist/
ℹ Generating pages
✔ Generated route "/"
✔ Client-side fallback created: 200.html
✨  Done in 7.95s.

実行ログをもとに、SPA（target: server）モードのnuxt generateの内容をまとめると以下のようになります。

SPA（target: server）モードにおける『nuxt generate』の実行内容
  • クライアントサイドのビルドが実行される
  • Targetはstaticに設定される
  • dist配下にルート（/）の静的ファイル（index.html）が作成される

『mode: spa』『target: static』の場合

デプロイ先を静的ウェブサイトに指定したSPAです。

nuxt buildの実行ログは以下の通りです。

ℹ Production build
ℹ Bundling only for client side
ℹ Target: static
✔ Builder initialized
✔ Nuxt files generated

✔ Client
  Compiled successfully in 5.23s


Hash: 286e8db275c753c4ebd5
Version: webpack 4.44.1
Time: 5236ms
Built at: 2020/08/08 16:06:27
                          Asset       Size  Chunks                         Chunk Names
 ../server/client.manifest.json   7.79 KiB          [emitted]
                       LICENSES  389 bytes          [emitted]
                 app.43c0549.js   55.4 KiB       0  [emitted] [immutable]  app
node_modules/commons.48315ec.js    168 KiB       1  [emitted] [immutable]  node_modules/commons
         pages/index.9ce75e2.js   1.51 KiB       2  [emitted] [immutable]  pages/index
     pages/users/_id.5722ee2.js   1.45 KiB       3  [emitted] [immutable]  pages/users/_id
             runtime.84feac3.js   2.35 KiB       4  [emitted] [immutable]  runtime
 + 1 hidden asset
Entrypoint app = runtime.84feac3.js node_modules/commons.48315ec.js app.43c0549.js
ℹ Ready to run nuxt generate
✨  Done in 7.75s.

実行ログをもとに、SPA（target: static）モードのnuxt buildの内容をまとめると以下のようになります。

SPA（target: static）モードにおける『nuxt build』の実行内容
  • クライアントサイドのビルドが実行される
  • Targetはstaticに設定される

nuxt generateの実行ログは以下の通りです。

ℹ Doing webpack rebuild because nuxt.config.js modified
ℹ Production build
ℹ Bundling only for client side
ℹ Target: static
✔ Builder initialized
✔ Nuxt files generated

✔ Client
  Compiled successfully in 6.29s


Hash: 47d36e3c6f1bf3363c94
Version: webpack 4.44.1
Time: 6296ms
Built at: 2020/08/08 16:07:19
                          Asset       Size  Chunks                         Chunk Names
 ../server/client.manifest.json   7.79 KiB          [emitted]
                       LICENSES  389 bytes          [emitted]
                 app.ef33196.js   55.4 KiB       0  [emitted] [immutable]  app
node_modules/commons.48315ec.js    168 KiB       1  [emitted] [immutable]  node_modules/commons
         pages/index.9ce75e2.js   1.51 KiB       2  [emitted] [immutable]  pages/index
     pages/users/_id.5722ee2.js   1.45 KiB       3  [emitted] [immutable]  pages/users/_id
             runtime.84feac3.js   2.35 KiB       4  [emitted] [immutable]  runtime
 + 1 hidden asset
Entrypoint app = runtime.84feac3.js node_modules/commons.48315ec.js app.ef33196.js
ℹ Generating output directory: dist/
ℹ Generating pages
✔ Generated route "/"
✔ Client-side fallback created: 200.html
✨  Done in 8.93s.

実行ログをもとに、SPA（target: static）モードのnuxt generateの内容をまとめると以下のようになります。

SPA（target: static）モードにおける『nuxt generate』の実行内容
  • クライアントサイドのビルドが実行される
  • Targetはstaticに設定される
  • dist配下にルート（/）の静的ファイル（index.html）が作成される

まとめ

実行結果をまとめると以下のようになります。

実行結果まとめ
  • プロセスは異なるものの、『nuxt build』ではビルドファイル、『nuxt genearte』では静的ファイルが生成される結果は同じ
  • SPA（target: server）のときに限り、『nuxt build』でビルドファイルだけでなく静的ファイルも生成される
  • 『target』が異なっていても『mode』が同じであれば成果物は変わらない
  • 『mode』が異なる、つまりSPAかSPAじゃない（SSR or SSG）かで成果物が異なる
  • 『nuxt build』による成果物は、SSR/SSGの場合はサーバーとクライアント、SPAの場合はクライアントのみのビルドファイル
  • 『nuxt generate』による成果物は、SSR/SSGの場合は各画面、SPAの場合はルートのみの静的ファイル

この記事がいいなと思いましたらTwitter(@nishina555)のフォローもよろしくお願いします！

  1. SSGは『静的化』や『静的ファイル生成』などとも呼ばれることがあります。 ↩
  2. NUXTJS『コマンド一覧』 ↩ ↩
RECOMMEND