選擇Tanstack Start的原因

mosir一直都有大量使用Tanstack Query作為store layer,Tanstack給我的印象一直都比較好(嗯對我個人蠻印象派(?)的)。

不過最主要是Tanstack Start的Isomorphic-by-default哲學對開發來說比Nextjs友善很多。以同樣的auth cookie來說,包裹Server Function並不會造成SSR錯誤,Isomorphic-defined code可以在SSR跟Client-side共用,不用擔心目前狀態是SSR或是browser,也不用包裹大量useEffect或刻意設計delayed-execution。

Tanstack Router的beforeload跟loader用法也比較接近RSC以前的SSR,但搭配React Suspense可以做更精細的控制。舉例來說,文章頁面的文章本身是critical data,SSR在回傳前會確保重要資料有效,提前解開Suspense,初始載入不會發生整個頁面都是Skeleton的狀況。

同時,Tanstack Router是Client-side Router。這點完美解決的Nextjs必須preload每個頁面的問題。只要載入過一次文章相關assets,之後的導覽會完全是SPA mode,完全不需要送出任何request到SSR Server。搭配現有store layer,甚至可以讓大部分的頁面完全不需要載入任何data。

最後,Tanstack Start支援(並且推薦)的nitro可以針對bun或甚至Cloudflare Worker的V8進行特化包裝。目前版本的mosir SSR Server就是在bun上執行的,assets載入時間非常優秀,跟Twitter/X比起來甚至可以達到10~20倍左右的速度。未來也有機會在距離使用者更近的Cloudflare節點(例如TPE或KHH)部署Worker,整體載入時間還有機會再更低。

但我想我還是會懷念Turbopack。Vite的開發效能是用跳過打包換來的,這點在很多edge case上是個很嚴重的問題。轉換過程中已經不止一次為了解決runtime issue必須要來回切換dev跟production build。Vite真的不是很理想的開發工具,如果Turbopack之後有在Nextjs以外環境執行的可能性,我想我應該會毫不猶豫切換過去。

最後

我自己的技術選型哲學是可替換性,這也是我想推薦給其他開發者的思考方式。這次可以從Nextjs切換到Tanstack Start,很大一部份原因是我的開發模式是把Nextjs捏成我的心智模型,而不是讓我的腦袋去適應Nextjs。

我不確定mosir會停留在Tanstack Start或甚至React多久,未來很有可能會有其他micro frontend,或是會有下一次架構轉換。