【Nuxt.js】導入に必要なサーバ要件について

サーバで動かすには何が必要なの？

まずはローカル環境でいろいろ試すとは思いますが、
実際にプロダクトとしてサーバにローンチするにあたり、結局のところ
動作させるにはどんな環境が必要なのか？という軸でざっくり説明したいと思います。
なので、Nuxt.jsそのものがどんなものなのか、はここでは割愛させていただきます。

そもそも何故こんな記事を書こうと思ったのか

自身はPHPを中心としたバックエンドよりの仕事が多かったため、
Vue.jsやNuxt.jsの台頭によるフロントエンドの隆盛を横目で流し見していました。
さすがにこりゃいかん、と、思い始めたのも2018年あたりという…
で、細々と勉強をしている中で、文法作法はさて置き、いまいち分からなくなるのが
開発とローンチ(サーバ)での動作環境についてでした。
詰まるところ、ローカルではNode.jsやらnpmやらwebpackやらVueCLIやら
あれもこれもインストールして大盛り上がりな状態で開発していくんですが
ローンチするサーバには結局、どんな要件があれば動くの？ってところが非常に分かりにくかったんですね。
その切り口でシンプルに解説している投稿もなく
(もしかしたら昨今のフロントエンドエンジニアは、肌感で当たり前になっていることなのかもしれないが…)
ここは自身に言い聞かせる意味でも、あえて記事にしておこうと思った次第です。

モード別に見るとこんな感じ

Nuxt.jsには、モードによりデプロイ結果が変わってくるという仕様があります。

Universal(ユニバーサル)	Single Page App(シングルページアプリケーション)	Generate(静的ファイル生成)
ssr(サーバーサイドレタリング)	SPAってやつ	生のhtmlを書き出し
UIレンダリング全体を担う	ミドルウェアとして組み込む, プログラムの一部として使う	vueファイルからhtmlに生成してしまう
静的ホスティング不可	静的ホスティング可(buildしたdist一式アップすれば動く)	静的ホスティング可(buildしたdist一式アップすれば動く)
サーバにNode.jsいる	サーバにNode.js不要	サーバにNode.js不要
phpと同じように、サーバ側でレンダリングしてhtmlを作成してからレスポンス返す	フロントにてjsでhtmlをレンダリングするので、初回が遅い。あと、jsでhtml生成なので、SEO的に弱い	ただのhtmlサイト。ある意味では最強の状態
SEO OK	SEO△　個別のメタやOG×	SEO OK
いろいろコスト高い	コスト低い	コスト低い
サクサク	初回重い	普通
中～大規模サイト	LP,小～中規模	ALL

※デフォルトはユニバーサルモード

なんというか、つまり
サーバ側でNode.jsさんがごにょごにょしてページを作ってからフロントに返し、フロントはただそれを表示するだけか(SSR)、
とりあえず最初にサーバから材料まるっとフロントに渡して、フロントのjsさんが頑張ってごにょごにょして都度ページをレンダリングして表示させるか(SPA)、
はたまた、なんてことない生のhtmlを用意するか(静的サイト)、
という三つのやり口があるんです。

余談ですが、静的htmlのジェネレートもできるんだ、ってちょっと驚きでした。
これ、MT(MovableType)みたいな使い方もできるんだ…って。

あと、SPAのところで一つ補足
ダイナミックレンダリングって技術があるようで、
ボットのクロール用にはhtmlを読ませて、ブラウザからの人のアクセス時にはjs生成ページを見せるみたいな
使い分けを行うことでSEOを補完するやり方もあるようです。
しかし、SSR移行までの一時しのぎ、的な位置づけのようで、
定着させる必須技術というわけではないですね。

こう考えると、はっきりしてくるんですが、
ユニバーサル、つまりSSRするときは、当たり前ですがサーバ要件にnode必須ということですね。
で、SPAとなるとサーバ側でレンダリグする必要はないので、サーバにnodeは不要、ローカルの開発環境にだけあればよいですし、
Generateでも同じことですね。

結局のところ

Node.jsがいるんです。ただそれは、ローカルの開発環境には必須ということであり
SSRモードで利用しないのであれば、サーバにNode.jsは不要です。
という、ものすごく単純で当たり前のことに行き着くのでした。

Nuxt.jsをプロジェクトに導入する場合は、
必ずサーバ要件でNode.jsが使えるかどうか確認してからにしましょう。
SSRでいくぜ！なんて息巻いてみても、後でやっぱりできませんでした…なんてことがないようにね！