Nuxt.jsのビルドについてまとめてみた　デプロイに際して最適な方法は？

最近仕事でオーディションサイトを「Serverless+Nuxt.js」で作っているのですが、今回は初めてイケてると話題のNuxt.jsを業務で取り入れてみました。

右も左も分からなかったのですが、学習&実務で学習したことをお話ししていこうと思います。

今回お話しするのはNuxt.jsの「ビルド」についてです。

Nuxt.jsのビルドに関しては二つ種類があり、大別すると「SSR」か「そうでないか」だと思います。

SSRとは、サーバーサイドレンダリングの頭文字をとった単語ですがこちらはちゃんとSSRするには意外とめんどくさかったりします。

というのも、サーバーサイドレンダリングを行うにはNuxt.jsの中で下記のコマンドを実行しないとならないため。

```
nuxt build
nuxt start
```
こちらを実行しなければならないため、通常の静的なホスティング(S3など)ではNuxt.jsにおいてSSRを実現できないわけです。

というのも、nuxt startを実行するとポートが立ち上がりそれを解決しないと外部からのアクセスができないからですね。

しかし、後述するSPAモードやStaticモード(nuxt generateした場合)とは違い、Nuxt.jsのメリットであるSEOに適したビルドや非同期を用いたミドルウェアも実現できるので可能であればSSRでデプロイまでいけるのが一番最適な方法だと思います。

では、「そうでない方」はなんなのか

そうでない方は、SSRしないビルドです。

詳しく言えばNuxt.jsのSPAモードがそれにあたるでしょう。
また、modeはuniversalですが「nuxt generate」で静的なファイルを書き出している場合もこちらにあたります。

こちらの場合は、静的なホスティングになるのでデプロイ自体は簡単です。

SPAモードの場合は「nuxt.config.js」の「mode」を「spa」にして「nuxt build」をすると「dist」配下にソースが書き出されます。
また、「nuxt generate」の場合はも同じように「dist」配下にソースが書き出されます。

この「dist」配下に書き出されたものをアップロードすればいいのでSSRモードのようにサーバー上でコマンドを実行しなければならない、ということはないわけです。

普通のhtmlをアップロードするような感覚でいけるわけですね。

では、Nuxt.jsにおいてSPAモードと「nuxt generate」で書き出した場合で何が違うのでしょうか？

これらの違いですが、SPAモードでは

一方「nuxt generate」で書き出した静的なファイルの場合には

というそれぞれのメリットがあると思います。

ただ、ほとんどの場合でSPAモードのメリットを享受したい場合はSSRモードでデプロイすると思います....

しかし、完全に静的なファイルで書き出すとなるとミドルウェアでAPIを叩いてどうこうする、といったことができなくなるのでmetaタグが全ページで同じであればいい、ということあればSPAモードは非常に有用です。(実際に今回の案件ではSPAモードで実装しようと考えているので...)

かなり案件の要件によってビルドの方法は変わってくると思いますが、出来るだけSSRモードでビルドした方がNuxt.jsの恩恵を受けられるでしょう。

しかし、s3などの静的ホスティングの場合、つまりレスポンスが重要でそこまで動的にルーティングや情報が変わらない場合はSPAモードか「nuxt generate」で書き出した方がいい場合もあります。

Nuxt.jsは個人的にかなり気に入ったので次回はこれらを踏まえて早めの段階からデプロイを見据えて検討しようと思います。

ふんばりフロントエンジニアのブログ