為什麼選擇 TanStack Start 和 Router?

by Tanner Linsley on Dec 03, 2024. TanStack Start and Router Blog Header

構建現代網絡應用程序絕非易事。我們選擇的框架和工具不僅會影響開發體驗,還會決定我們所構建應用程序的成敗。雖然市場上有許多優秀的框架,但我相信 TanStack RouterTanStack Start 因其解決當今開發人員面臨挑戰的能力以及對未來的準備而脫穎而出。

這些不僅僅是另一套工具 —— 它們代表著以更少的摩擦、更多的樂趣來構建更好應用程序的承諾。以下是為什麼我認為您會像我一樣喜歡使用它們的原因。

可靠的類型安全

類型安全不僅僅是一個流行詞 —— 它是創建穩健、可維護應用程序的基礎工具。TanStack Router 提供了超越基礎的上下文類型安全,使類型能夠在應用程序的每個部分之間無縫流動。路由定義、參數、導航,甚至狀態管理都與完全推斷的類型協同工作。

這對您意味著什麼?這意味著不必再猜測您是否正確定義了參數,不必再調試類型不匹配的問題,也無需使用額外的插件或 AST 轉換來填補空白。TanStack Router 與 TypeScript 的自然架構配合得天衣無縫,使體驗順暢、可預測且令人愉悅。

這種級別的類型安全不僅可以節省時間 —— 還能建立信心。我相信其他框架將花費數年時間才能趕上這一點。

釋放 URL 狀態管理的力量

在網頁開發中,最被忽視但最強大的工具之一就是 URL。它是原始的狀態管理系統 —— 快速、可共享且直觀。然而,許多框架將 URL 視為次要考慮因素,僅提供基本工具來讀寫狀態。

TanStack Router 徹底改變了這一點。在 URL 中管理狀態不僅被支持 —— 還被鼓勵。通過直觀的 API,您可以使用內置的類型安全和運行時驗證來驗證、讀取和更新搜索參數。想要創建一個深度嵌套的動態過濾系統或將應用程序的狀態與 URL 同步?易如反掌。

但這不僅僅是關於開發人員的便利性 —— 還關乎創造更好的用戶體驗。當您的應用程序狀態存在於 URL 中時,用戶可以共享、收藏,並從他們離開的位置繼續操作。TanStack Router 讓這一切變得輕而易舉。

熟悉的模式,更多的靈活性

如果您曾經使用過 Remix 或 Next.js,您會在 TanStack Start 中發現許多熟悉的概念。但熟悉並不意味著妥協。我們採用了這些框架中的一些最佳理念並將其發揚光大,消除約束,提供更多靈活性。

例如,如果您來自於像 Remix 這樣的服務器優先框架,您會發現路由模式和服務器函數集成感覺很自然,但它們也同樣適用於傳統的客戶端單頁應用程序。您不必選邊站隊 —— 您可以兼顧兩種優勢,且幾乎沒有妥協。

為未來而建(並已經擁抱未來)

網絡發展迅速。隨著 React Server Components (RSCs) 即將到來,React 19 引入新模式,以及流式傳輸成為數據傳輸的標準,框架需要做的不僅僅是跟上步伐 —— 它們需要引領潮流。

TanStack Start 已為未來做好準備。RSC 被視為另一種服務器端狀態,具有強大的原語用於緩存、失效和將它們組合到您的應用程序中。流式傳輸不是事後才想到的 —— 它已內置於 TanStack 的核心工作方式中,為您提供工具,無需額外複雜性即可增量地將數據和 HTML 發送到客戶端。

但我們不僅僅是著眼於未來。TanStack Start 同時也讓這些先進功能變得平易近人,並可以立即使用。您不需要等待"下一個重大事件"就可以開始構建感覺像未來的應用程序。

單頁應用並未死亡(我們只是讓它們變得更好)

現在有很多關於服務器優先架構的討論,雖然它們令人興奮,但這並不是全部。單頁應用程序 (SPAs) 仍然是構建快速、互動性強的應用程序的絕佳方式 —— 特別是當做得正確時。

TanStack Start 不僅保持了 SPA 的可行性 —— 還使它們變得更好。通過簡化的模式、強大的狀態管理和深度集成,您可以構建性能更好、更易維護且使用起來很愉悅的 SPA。無論您是服務器優先、客戶端優先,還是介於兩者之間,TanStack 都能為您提供構建您想要的應用程序的工具。

無與倫比的數據集成

如果您曾使用過 TanStack Query,您已經知道它極大地簡化了數據獲取。但 TanStack Query 和 TanStack Router 之間的集成才是真正的魔力所在。預取數據、緩存結果和流式傳輸更新都是無縫、直觀且可擴展的。

例如,您可以在路由加載器中預取數據,將其流式傳輸到客戶端,並按需水合 —— 全部通過單一 API。無論您是管理簡單的博客還是複雜的儀表板,您都會發現自己花更少的時間連接數據,更多的時間構建功能。

這不僅僅是一種集成 —— 這是路由和數據獲取之間的合作關係,使其他所有方式相形見絀。

可擴展的路由

路由不僅僅是一個工具 —— 它是每個應用程序的骨幹。然而,大多數路由器在事情變得複雜時都會遇到困難。這正是 TanStack Router 閃耀的地方。它旨在處理從幾個簡單路由到數千個深度嵌套路由的各種情況,毫不費力。

類型安全導航、分層路由上下文和高級狀態同步等功能使構建在規模和複雜性上都能擴展的應用程序變得容易。而且因為 TanStack Router 與 TypeScript 原生協作,您可以獲得所有類型安全的好處,而不犧牲性能或靈活性。

持續創新

最讓我興奮的是 TanStack 才剛剛起步。從同構服務器函數到強大的緩存原語和簡化的 React Server Component 支持,我們不斷推動可能性的邊界。我們的目標不僅僅是構建出色的工具 —— 而是構建幫助構建更好應用程序的工具。

滿足於"足夠好"?

其他框架有各自的優勢,但如果您尋找創新、靈活且深度集成的工具,TanStack Router 和 Start 獨樹一幟。它們不僅僅解決了今天的問題 —— 它們正在幫助您構建為明天準備的應用程序。

那麼為什麼等待呢?立即探索 TanStack RouterTanStack Start,看看應用程序開發可以有多好。

讓我們一起打造令人驚嘆的產品!