TanStack StartはNext.jsより優れているのか?

TanStack Startが注目を集めており、Next.jsと比較して優れているかという問いから動画が始まる。TanStack StartはTanStack Routerにサーバーサイドレンダリングやサーバーサイド関数などのサーバー機能を追加したフルスタックReactフレームワークであることが説明される。Next.jsとReact Vite with React Routerの比較は間違っており、サーバーサイドロジックが不要ならViteプロジェクトにReact RouterかTanStack Routerを追加すればよいと指摘される。この動画では、実際に両フレームワークで同じメモアプリを構築したライブ配信の内容を基に、複数の視点から比較を行うことが述べられる。RemixやNuxtなど他のフレームワークもあるが、この動画ではNext.jsとTanStack Startに焦点を当てる理由が説明される。

AI対応度の観点から、Next.jsが明らかに優位であることが示される。TanStack Startはまだリリース候補段階で、過去1年間ベータ版とアルファ版だったため、ChatGPTなどのAIが持つ知識は古く誤っている可能性が高い。Next.jsもuse cacheディレクティブなど新機能についてはAIの理解が不十分だが、app routerやReact Server Componentsについては良く理解している。ただし、Context 7のようなMCPを使ってドキュメントにアクセスさせたり、適切なコンテキストを提供することで、この問題は解決可能であると指摘される。エコシステムについても、Next.jsは歴史が長く規模が大きいため、チュートリアル、YouTube動画、コース、パッケージなどのリソースがはるかに豊富である。ダウンロードチャートを見ても、Next.jsの利用者数が圧倒的に多いことが分かる。

学習の容易さについて、両フレームワークとも2つのプラスが付けられるが、理由は異なる。Next.jsはApp Routerを使った始め方が分かりやすく、page.tsxファイルを作成するだけでページができ、動的セグメントも使える。ドキュメントもコアコンセプトを段階的にガイドしており、初心者には優れている。しかし、キャッシングなどの高度な概念は非常に複雑で混乱を招く可能性がある。一方、TanStack Startは入門ドキュメントがNext.jsほど良くなく、データフェッチングやミューテーションの説明が不足している。また、TanStack Routerのドキュメントも見る必要があり、初めて見ると圧倒される。しかし、最初の障壁を乗り越えれば、すべてが理にかなっており、Next.jsのようなキャッシング関連の隠れた落とし穴もない。つまり、Next.jsは始めやすいが高度な機能が難しく、TanStack Startは始めるのが難しいが高度な機能への対応が簡単である。

開発者体験の観点から、TanStack Startに3つのプラスが付けられ、Next.jsより優れていると評価される。Next.jsにはいくつかの問題があり、特にキャッシングの問題で開発モードと本番モードで異なる動作をすることがあり、常に本番モードでテストする必要があるため開発スピードが遅くなる。また、開発サーバーもwebpackバージョンを使用している場合は遅くなることがある。新しいturbopackバージョンは改善されているが、TanStack StartのViteベースのセットアップには及ばない。TanStack Startは高速で予測可能であり、奇妙な動作もほとんどなく、まだリリース候補段階ではあるが、全体的な開発者体験はNext.jsより優れていると評価される。ただし、これは個人的な見解であり、人によって異なる可能性があることが強調される。

ルーティングについて、両フレームワークともファイルベースのアプローチを採用している。Next.jsはルートとして機能するファイルを設定し、様々な命名規則に従う必要があり、パラレルルートのような複雑な機能もある。TanStack Startも同様にファイルベースで、TanStack Routerを内部で使用しており、ファイル名の規則がある。TanStack Startの大きな利点は、ファイルベースのルーティングで完全な型安全性が得られることである。どちらの命名パターンを好むかは好みの問題だが、TanStack Startの100%の型安全性は嬉しい機能である。TypeScriptサポートに関しても、Next.jsは非常に優れているが、TanStack Startはさらに優れており、サーバーアクション、サーバー関数、データフェッチングなどすべてにおいて、TypeScriptを使う場合は本当に使っていて楽しいフレームワークであると評価される。

データフェッチングとデータ変更について、両フレームワークとも異なるアプローチを取っている。Next.jsはReact Server Componentsを使用し、ページコンポーネントはデフォルトでサーバー上でのみレンダリングされるため、データベースアクセスコードをコンポーネントに直接入れてもクライアント側に漏れない。TanStack Startは異なるアプローチで、ルートコンポーネントはサーバー側とクライアント側の両方でレンダリングされるため、ローダーパターンを使用する。ローダー内でcreate server functionsでラップされた関数を呼び出すことで、サーバー側でのみ実行されるがクライアント側から呼び出し可能な関数を作成できる。ミューテーションに関して、Next.jsはuseServerディレクティブでデコレートされたサーバーアクションを使用し、TanStack Startはcreate server functionsとuseServer関数フックを組み合わせて使用する。全体的な考え方は同じだが、実装の詳細が異なる。

キャッシングについて、Next.jsは非常にアグレッシブで潜在的に複雑であり、Next.jsの難しい部分の一つであることが指摘される。アグレッシブなデフォルト設定により良好なキャッシングを得られる可能性があるという利点はあるが、簡単に問題を引き起こすこともある。TanStack Startは良好なデフォルト設定と要約でき、Next.jsほどアグレッシブではなく、最も重要なのは開発モードと本番モード間で一貫性があることである。ユーザーがルート間を移動する際にデータが一定期間キャッシュされるため、高速なナビゲーション時にサーバーに大量のリクエストを送信することがなく、パフォーマンスに役立つ。ただし、これは開発者が適切なキャッシュヘッダーを自分で設定し、Next.jsで必要とされるよりもキャッシング方法について考える必要があることも意味する。全体として、TanStack Startの方が開発者にとって扱いやすいキャッシングシステムであると評価される。

安定性について、両フレームワークとも2つのプラスが付けられる。Next.jsは明らかに成熟度が高いが、ここ数年はかなりバグが多く、特に開発サーバーがクラッシュなどの問題を抱えていた。しかし大幅に改善され、全体的には安定した体験となっており、問題なく本番環境で稼働している何千ものアプリケーションが存在する。Reactのセキュリティ脆弱性はあったが、それは主にNext.jsの問題ではなく、将来的にReact Server ComponentsをサポートすればTanStack Startにも影響する可能性がある。TanStack Startはまだリリース候補段階で、奇妙なクラッシュやエラーメッセージ、奇妙な動作などの問題が確実にある。リリース候補段階であることを考えるとかなり安定しているため2つのプラスが付けられるが、使用する際には問題に遭遇する可能性があることを認識しておく必要がある。実際にbuildmygraphic.comという本番環境のアプリケーションがTanStack Startで問題なく稼働している例が紹介される。

バッテリー同梱機能について、Next.jsの方が間違いなく優れている。Next.jsには組み込みの画像コンポーネントや国際化サポートがあるが、TanStack Startにはそのようなものが一切ない。必ず必要なものではなく、サードパーティのパッケージを使用することもできるが、組み込み機能が重要であればNext.jsの方が良い選択である。デプロイメントについて、Next.jsはVercelによって構築されており、Vercelへのデプロイは非常に簡単でスムーズで、すべてが最適化されている。歴史的には自分のサーバーへのデプロイは難しかったが、Next.jsチームはそれを改善し、今日では他のサービスにも大きな問題なくデプロイできる。Vercel使用時は3つのプラス、他のプロバイダー使用時は2つのプラスが付けられる。TanStack Startは2つまたは3つのプラスで、CloudflareやNetlifyのような公式サポートパートナーへのデプロイはスムーズだが、BUNで自分のVPSにデプロイする場合はドキュメントがまだわかりにくく、いくつかの問題に遭遇する可能性がある。

動画の最後に、すべての評価が主観的であり、話者の経験と考えに基づくものであることが強調される。視聴者に対して、Next.jsやTanStack Start(T3 Stackと言い間違えている)に切り替えたか、切り替えを検討しているか、あるいはそれらを使わずに別の選択肢を使っているかについて、コメント欄で意見を共有するよう呼びかけられる。この動画は両フレームワークの包括的な比較を提供し、それぞれの強みと弱みを明確にすることで、視聴者が自分のプロジェクトに適したフレームワークを選択する際の参考になることを目的としている。