web-server で使っている Next.js を Vite に置き換える

[kizahasi]

今まで web サーバーのフレームワークとして Next.js を使っていたが、Vite に置き換えることにした。Remix 等ほかの選択肢も検討したが、Vite を使うことに決定した。

Next.js を使っていた理由

Flocon の web サーバーには今まで Next.js を使ってきた。Next.js を導入した理由は次のとおり。

• next export で静的ファイルのエクスポートができる。比較的楽に Flocon の web サーバーを立てたい方に便利だと思われる機能である。
• Vercel などといった（Flocon の身内サーバーに利用する程度の使用量の範囲内であれば）無料のホスティングサービスを利用するという選択肢もある。git が使える場合はこちらのほうが web サーバーの更新が楽なので便利だと思われる。
• file-based routing に対応
• TypeScriptのコンパイル、minify、bundle 等を自動でしてくれるのでビルドが簡単。
• OSの環境変数や .env ファイルを自動的に読み込んでくれる。
• あまり config を設定せずにこれらの機能が使える。ただしこれに関しては記憶がおぼろげで、実際はそこまでではなかったかもしれない。
• 人気のフレームワークであるため、開発が停滞するリスクが比較的小さいと考えられる。

その一方で、Next.js の豊富な機能のほとんどは Flocon には必要ないという状況であった。Flocon が Next.js に求めていた部分はむしろ逆で、 最低限の設定で利用可能なシンプルなビルドツールであった。

Next.js をやめる理由

ここ最近は、Next.js のバージョンアップに付いていく学習コストが高そうで大変だと感じてきた。コードの変更も必要。しかもそのバージョンアップで追加される機能は Flocon には必要のないものがほとんど。そのため Next.js から他のフレームワークに乗り換えることに決めた。

乗り換え先候補

これらは Flocon の web-server に必要な機能を備えていると思われる。

• Vite + file-based routing plugin(@tanstack/react-router など)
• Remix SPA mode

https://qiita.com/takumi3488/items/bc14b537f49704a1cf16 も読んだほうがよさそう？

Vite と Remix の比較

Vite はフロントエンドビルドツールであり、Remix は full stack web framework。ただし単に静的ファイルを出力したいという目的であればどちらも適していると思われる。

Remix は Vite のプラグインという立ち位置。

Remix 公式曰く「we now support Vite as an alternative compiler. In the future, Vite will become the default compiler for Remix.」 - https://remix.run/docs/en/main/guides/vite

実際に両方使ってみての感想

Flocon の web サーバーのコードを最初 Vite に移行し、その次に Remix に移行した。そこで実際に触ってみての感想。

Remix では file-based routing は標準サポートだが、Vite ではプラグインが必要。そのため Vite では@tanstack/react-router をプラグインとして使ってみたが、コンポーネントを export する際にコードを追加で3行ほど書く必要がある以外は特に不満点はなかった。

Remix だと JavaScript ファイルが自動分割されるので便利。ただし Flocon ではあまり重要でないかも。

Remix では meta を route ごとに設定する機能が自動でついている。ただし Flocon では使わなくても大丈夫そう。

Vite はあまりエラーが出なかったが、Remix ではいくつかエラーが出たので修正する必要があった。このことを考えると、将来新たなエラーに遭遇する確率も Remix のほうが高そう。

• Remix では SPA モードでも SSR でのビルドをするらしく、そこでいくつかエラーが出た。例えば react-use を使っていると[remix] Named export 'useAsync' not found. The requested module 'react-use' is a CommonJS module, which may not support all module.exports as named exports.というエラーが出た。他に lodash でも確認した（lodashは古いのでせっかくなのでes-toolkitに置き換えた）。vite.config.ts 内の ssr.noExternal に react-use を含めることで解決できた。https://github.com/remix-run/remix/discussions/8934 に同様の issue がある。
• Vitest と Storybook を実行するときは vite.config.ts の remix プラグインを無効にする必要があった。
• Remix では <Board /> を利用する際に React.lazy を使って読み込まないと konva のエラーが出た。ただしこれは Next.js でも同様であり、そのときは next/dynamic で対処していた。

結論としては、現時点では Flocon の web サーバーには Vite を使うことにした。Vite を使うのであれば代わりに Farm を使ったほうがいいという意見もあるが、Vite のほうが利用者が多くサポートの継続性が高そうなのと、Farm は v1.0 がリリースされたのが 2024/4/15 なので少し新しすぎるため少し様子見したいと考えて Vite にした。

Flocon に生じる breaking changes（未確定、未調査のものも含む）

• yarn exportではなくyarn buildで静的ファイルを出力するようになった。この他にpackage.jsonのコマンドがいくつか変わった。
• .env 系ファイルのうちどれが読み込まれるのかとその優先順位が変わった可能性がある
• .env ファイル等は読み込むが、OS の環境変数は読み込むのか？
• 静的ファイルを自鯖で公開する形で運用している場合、静的ファイルの構造が変わった可能性があるため、Webサーバソフトウェアの設定を変える必要があるかも。ファイアウォールとルーティング。
• 404の見た目が少し変わった。静的ファイルを使っている人は関係ないかも？
• 一切検証していないが、URL における foo/bar と foo/bar/ の間の扱い方が変わったかもしれない
• ViteにNetlify以外にもデプロイする方法が書かれていたと思うのでそれを紹介したほうがいいか
• 静的ファイルの出力先がoutからdistに変わった。outに出力することもできるが、混乱する人は少ないと思うのでViteのデフォルトで行く予定
• [要修正]部屋を開いた際に左上にあるFloconアイコンが上に寄っている。ただしこれは antd のアップグレードによる問題の可能性が高い

将来breaking changesになる可能性

• 環境変数のプレフィックスはNEXT_PUBLIC_になっているが、将来これをやめてVITE_かFLOCON_等になるかも
• next start と next serve がなくなったのでどうするか。vite preview は production には非推奨( https://ja.vite.dev/guide/cli.html#vite-preview )。 vite dev も production で使うのは想定されてないっぽい？sirv で代用できるのでおそらく大丈夫そう。

[codecov]

Codecov Report

Attention: Patch coverage is 5.41212% with 1905 lines in your changes missing coverage. Please review.

Project coverage is 25.27%. Comparing base (85888c2) to head (5cd3d6f).
Report is 39 commits behind head on main.

Files with missing lines	Patch %	Lines
...oom/subcomponents/components/RoomMenu/RoomMenu.tsx	0.00%	183 Missing ⚠️
apps/web-server/src/hooks/useSetupApp.ts	0.00%	108 Missing ⚠️
...s/file/UploaderFileBrowser/UploaderFileBrowser.tsx	0.00%	76 Missing ⚠️
apps/web-server/src/routeTree.gen.ts	0.00%	62 Missing and 1 partial ⚠️
...mMessagesPanelContent/RoomMessagesPanelContent.tsx	0.00%	62 Missing ⚠️
...room/Room/subcomponents/components/Board/Board.tsx	0.00%	48 Missing ⚠️
...erver/src/components/pages/IndexPage/IndexPage.tsx	0.00%	45 Missing ⚠️
...ts/models/file/FileBrowser/FileBrowser.stories.tsx	0.00%	43 Missing ⚠️
...pps/web-server/src/components/ui/Layout/Layout.tsx	0.00%	42 Missing ⚠️
...components/models/file/FileBrowser/FileBrowser.tsx	0.00%	39 Missing ⚠️
... and 135 more

Additional details and impacted files

@@             Coverage Diff             @@
##             main     #613       +/-   ##
===========================================
- Coverage   73.56%   25.27%   -48.29%     
===========================================
  Files         342      640      +298     
  Lines       12990    38220    +25230     
  Branches     3005     3272      +267     
===========================================
+ Hits         9556     9662      +106     
- Misses       3130    28239    +25109     
- Partials      304      319       +15     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.