Nuxt3でいくつかサイトを作ってみた雑感

省エネ開発が魅力のNuxt3

Nuxt3はVue.jsをベースにしたフレームワークですが、実際に使ってみるとだいぶVue.jsとは書き味が違う、Nuxt3独自の軽快な書き味になっています。

全てをきっちり書く思想のVue.jsに対して、Nuxt3はオートインポートなど「いかに省エネで書くか」という点にフォーカスしているように思えます。この書き味だけでもNuxt3の魅力にハマってしまうほどの魔力があります。

この点はNuxt3の良いところでもありますが、内部的な縛りもキツいので、アプリの種類によってはピュアVue.jsを使った方が組みやすい場面もありました。特に、アプリ・ページのライフサイクルはNuxt3のルールに完全に従うことになるので、SPAについてはVue.jsで書いた方が楽なシーンが多々ありました。

ただ、Nuxt3が規約ガチガチかというとそうではなく、かなり自由度は高いフレームワークだと思いました。

また、オートインポートなどの弊害か、動作はやや重いです。アプリをロードしてしまえば重さは気になりませんが、SSRだとやはりサーバースペックは必要ですし、APIとの通信をするとさらに重くなるので、この辺りは工夫が必要かと思います。

純粋な静的サイトジェネレータとして使うなら、他のフレームワークの方が良いかと思います。例えば、ブログとかペライチのページとかで使うメリットは少ないですね。

Nuxt3は、後述するUniversal renderingとか、より高度なアプリを構築するのに向いています。

まだRC（release candidate）版ということでバグが多い

2022年9月19日段階で、Nuxt3はRC版でバージョン10。3ヶ月くらいで7個くらいバージョンが上がっているので、順調に進んではいるようですが、それでも夏に安定版リリース予定だったが、開発は遅れている模様です。

また、RCバージョンが上がるたびに微妙に挙動が変わるので、今から手をつけるのは若干微妙かもしれません。遅くても年内には安定版がリリースされると思うので、今から手を出すならお試しくらいにしておいて、本番で使うのは安定版がリリースされてからのが良いと思います。

Hybrid Renderingが楽しみ

Nuxt3の目玉の一つはUniversal renderingにおけるHybrid Renderingなどだと思うんですが、内部的には動いていても、nuxt.config.jsでの細かい設定はまだ対応できていない模様。

ここができるとかなり大規模なサイトでも静的と動的を組みわせてSEOフレンドリーに作れる気がします。

これまでは、SPAなどのリッチなWebアプリはSEOに弱く、SPAが広がらない原因の一つだと思うのですが、Nuxt3のHybrid Renderingが完璧になれば、Vue.js界隈も盛り上がっていきそうな予感があります。