vue.js
nuxt.js

vueかnuxtか(今のところのnuxtについて)

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より体感2倍くらい遅い。これは正式版になったら解決するのかも。masterブランチで試してみた際はもっと早かった。


いろいろ書いたけどvueでSSRしようとしたらnuxt.js一択ではある。vue-server-rendererはかなり低レイヤーなので実装が大変だ。

nuxtは現在rc11(9月リリース)で間もなく正式版がリリース予定。前のリリースから時間があいているため、結構大きな変更になることが予想される。