shiodaifuku.io

Nuxt.jsとNext.js

この記事はしおだいふく Advent Calendar 2020 12日目の記事です。

仕事ではVue.jsを使う派だったのですが、今年たまたまReact.jsとかNext.jsにふれる機会がありました。 せっかくなので、Nuxt.jsとNext.js、あるいはVue.jsとReact.jsを両方使ってみた印象をまとめてみました。

Vue.js/Nuxt.jsはTypeScriptのサポートがクソだった

TypeScriptのサポートのショボさはReact.jsに比べてかつてのVue.jsが明確に劣っていた点です。 React勢に「だってVueはTypeScriptがクソじゃん」っていわれたらもうぐうの音も出ませんでした。 一応クラススタイルVueコンポーネントとかいう概念が存在していましたが、これがもう正直使わないほうがマシなレベルの代物でした。

ところが、これはもう過去の話になりました。 Composition APIが導入されたことで、根本的にTypeScriptとの相性が劇的に改善しただけでなく、 型付け難しい問題のガンであったVuexへの依存を下げることができるようになりました。

現時点では、TypeScriptの利用に関してはVueもReactも大差ないなと感じます。 少なくとも、これを理由としてどちらかを使わない、という判断をすることはないと思います。

Nuxt.jsはなんやかんやSSRに配慮している & Next.jsはSSRを重要視していない

特に最近のアップデートで顕著に傾向が分かれていますが、Nuxt.jsはSSRを前提とした機能改善が行われています。 Nuxt.js 2.13でSSGが強化された話をしましたが、SSGする際もuniversalであることを意識してコードを書く必要があります。

Next.jsはどちらかというとSSRよりもSSGを重点的に押してきているような気がします。 Vue.jsはNuxt.js以外のフレームワークがSSGを頑張る風潮もあるようですが、 基本的にはNuxt.jsでできることの劣化版です。 純粋にSSGに頼るのであればNext.jsに軍配が上がりそうです。

非同期処理の扱いがぜんぜん違う

これはたぶんSSRの扱いの差につながるんだと思いますが、総じてReact.jsとかNext.jsはPromiseの解決が上手くないです。 SSRしなければ関係ないっていう説はあるんですが、逆に言うとSSRを真面目にやるとなるとNuxt.jsを選ばざるを得ないかもしれない。

特に「初回アクセス時にクライアントサイドで1回だけ実行してほしい処理で、Promiseの解決を待ってほしい1」というクソニッチな要求がある場合、 Next.jsにはこれを実現する機能がなさそうなので辛いです。

その他 Vue.js / React.js由来の細かな違い

個人的に一番気になったのは「React.jsではhooksをconditionalに呼び出してはいけない」という制約があり、 これがVueのComposition APIの使用感とかなり違ったので実装時に結構つまづきました。

React.jsはスタイル部の書き方の流儀がプロジェクトごとに割と自由なのに対して、 Vue.jsでは単一ファイルコンポーネントの中で何を使って書くか決める程度で選択肢の幅がせまい感じがします。 これはどっちが良いとか悪いとかではないのですが、僕はフロントエンド族ではないので制約が強いほうが好みだなとは思いました。

スタイルに関してもうひとつ挙げると、Vue.jsもバージョン3.0によって徐々に改善されつつありますが、 コンポーネントの状態に応じてスタイルを変更するコードは(変数が簡単に使えたりするので)React.jsのほうが簡単に書けると思います。

まとめ

Vue.jsとReact.js、あるいはNuxt.jsとNext.jsだいたい似たような機能を持っていて、好みで選ばれることもよくあります。

が、よくよく見てみると細かいところで違いがあって、どんな機能を中心につかうのかとか、 選択するバックエンド環境とかによってどちらを選ぶべきかが結構変わりそうなので、食わず嫌いせずに試してみることは大事だなぁと思いました。


  1. 具体的には「Firebase Authenticationの初期化プロセスの完了を適切に待機したい」という要求

最新記事

  1. Cloud RunでgRPC streamingができるようになったので動かしてみたりした
  2. 2020年の執筆業まとめ
  3. アーキテクチャを設計する仕事とは
  4. 決済システムを設計するときに忘れてはならないたった1つの大切なこと
  5. third-party cookieと2020年