Railway 捨棄 Next.js 轉向 Vite 與 TanStack，大幅提升開發效率

Railway 捨棄 Next.js 轉向 Vite 與 TanStack，大幅提升開發效率。

Railway 近期將其整個生產環境的前端架構從 Next.js 遷移至 Vite 與 TanStack Router，透過兩次 Pull Request 完成且達成零停機時間，展現了對開發迭代速度的極致追求。

遷移背景與動機
Railway 團隊指出，Next.js 雖曾協助其產品成長，但隨著專案規模擴大，其架構已不再適用。主要痛點包括：

• 建置時間過長：建置時間超過 10 分鐘，其中一半時間耗費在 Next.js 的頁面優化上，嚴重拖累每日多次部署的開發節奏。
• 架構不符需求：Railway 的應用程式高度依賴客戶端互動（如畫布、Websockets），Next.js 強推的「伺服器優先」模式與其需求背道而馳，導致團隊必須在 Pages Router 之上自行開發複雜的變通方案來處理佈局。

技術選擇與優勢
團隊選擇轉向 Vite 與 TanStack Start，旨在追求更明確、以客戶端為主且迭代快速的技術棧：

• 型別安全路由：路由參數與搜尋參數皆可自動推斷，並支援全樹狀結構的自動補全。
• 原生佈局支援：透過路徑無關的佈局路由（Pathless layout routes），取代了過去所有 hacky 的變通做法。
• 極致開發體驗：實現即時 HMR（熱模組替換）與近乎零秒的開發伺服器啟動時間，大幅縮短回饋週期。
• 明確的控制權：減少框架內部的「魔法」，讓開發者對底層運作有更多掌控。

遷移執行策略
這次大規模遷移僅透過兩次 Pull Request 完成，且未造成服務中斷：

• 第一階段：移除所有 Next.js 專屬依賴（如 next/image、next/head），改用原生瀏覽器 API 或框架無關的替代方案，確保程式碼與框架解耦。
• 第二階段：正式替換框架，將 200 多個路由遷移至新架構，並引入 Nitro 作為伺服器層，整合重定向、安全標頭與快取規則。

取捨與反思
儘管獲得了更快的建置速度與開發體驗，團隊也坦承了必要的犧牲：

• 功能替代：需自行處理影像優化（改用 Fastly）、SEO 與網站地圖等功能，雖然增加了開發工作，但減少了外部依賴。
• 成熟度考量：TanStack Start 較新，可能存在粗糙之處，但團隊認為其發展方向正確且維護者回應積極，因此願意承擔此風險。

對前端部署的觀點
Railway 強調，前端框架應優化迭代速度，而基礎設施應讓部署過程「隱形」。透過 Vite 的 asset 模型，每個模組擁有獨立的內容雜湊（content-hashed）區塊，不僅大幅縮短使用者下載量，也讓持續整合與預覽部署變得更加高效。此次遷移不僅是技術堆疊的更換，更是為了消除程式碼編寫到使用者體驗之間的瓶頸。