2018.11.27 update2
ダイナミックレンダリングを利用できればSEOのためのSSRは必要ない。TypeScriptを使う場合、vueの方が資料も多い。
vue-cliの発展でプロジェクトsetupやビルドはnuxtと変わらないレベルで簡単。
パフォーマンスのためのSSRが必要ならNuxt.jsだが、そうでなければ今はvueを選ぶ。
2018.8.8 update
nuxt正式リリースしてしばらく経った。試す機会があったので改めて比べてみたが、現在はvueで始めるよりはnuxtを利用する方がメリットが大きいと思った。（vue v2.5.17 / nuxt.js v1.4.2）
- ビルドスピードは十分早くなった
- SSRを利用しなくても
nuxt generate --spaでvueプロジェクトと大体同じデプロイフローを取れる。※routingのpropsをpagesコンポーネントに渡せるかは調べてないので不明（ここはネックになり得る）- SSRはやっぱり必要になる可能性が高い（googlebotは問題なくてもtwitter,facebookのクローラーはjs不能）
vueをnuxtにしたとして、SSRをやらない限りは、開発コスト・学習コストは殆ど変わらないと思う。今新規でspa開発をするなら自分はnuxtを使うと思う。
以下元の本文
対象バージョン
- vue 2.5.x
- nuxt.js 1.0.0-rc11
SSR(Server side rendering)の必要性
SSRの目的はたいていSEOのためではないだろうか。しかしgooglebotはjavascriptを理解するし、非同期通信も行うので、正当に作っていればvueのみのSPAでも正しくインデックスされる。(Google Search ConsoleのFetch as googleで確認できる）
運用ハードルが高い
nuxtの場合は基本nodeサーバで動くので、それに沿った運用計画が必要。サーバスケーリングやデプロイをどうするか。この辺は公式で勧められているPaasなどを使うのが順当そう。AWSの場合はEC2でシンプルに運用するのは難しくてECSでコンテナベースでインフラ作る形になるのかな。
nodeやexpressを使ったサーバ運用やコンテナ運用の知見が乏しい場合、ハードルが上がる。
nuxt generateについて
- コメントで指摘を受け削除。nuxtコマンド時にspaオプションを付けることで対応可能な模様
これはvueのbuildみたいに静的サイトとして生成してくれるものと思っていたが、それは間違っていないのだが、動的ルーティングができない。
vue-routerで/users/:idのようなパスを切ってる場合は、設定で全ての存在するパスをリストしなければならない。
もちろんgenerateの場合のみでnuxt startでの利用時はそんなことないのだが、「いざとなったら静的サイト出力すればいいや」が出来ない場合がある。
vue-routerのprops:trueが使えない
/users/:idのid値を、pagesコンポーネントのpropsに渡せない。vue-routerの機能。
無理やりnuxtのテンプレートをいじって解決できるが、あまりやりたくないハック。
webpack build設定の上書きが面倒
既に設定されたオブジェクトについて差し替える形で面倒。loader系はloader名がキーになってるわけではないので探す必要がある。。
// vue settings
const vueLoaderIdx = config.module.rules.findIndex(r => r.loader === 'vue-loader')
// html内の画像URLなどを対象にする（元の設定だとimgがない）
config.module.rules[vueLoaderIdx].options.transformToRequire = {
embed: 'src',
img: 'src',
video: 'src',
source: 'src',
audio: 'src',
image: 'xlink:href',
}
nuxt devのビルドが遅い
server/clientのコードを両方ビルドしてるから？なんかvueのbuildより体感２倍くらい遅い。これは正式版になったら解決するのかも。masterブランチで試してみた際はもっと早かった。
いろいろ書いたけどvueでSSRしようとしたらnuxt.js一択ではある。vue-server-rendererはかなり低レイヤーなので実装が大変だ。
nuxtは現在rc11（９月リリース）で間もなく正式版がリリース予定。前のリリースから時間があいているため、結構大きな変更になることが予想される。