Inertia.js v3 的首個 Beta 版本現已釋出。此版本用內建的 XHR 客戶端取代了 Axios,引入了可自動處理頁面解析和 SSR(服務端渲染)的 Vite 外掛,併為樂觀更新 (Optimistic updates)、獨立 HTTP 請求和佈局屬性 (Layout props) 提供了原生支援。更少的樣板程式碼、更少的依賴,以及一系列讓你的 Inertia 應用執行更流暢的新功能。
我們以 Beta 版本釋出 v3,旨在讓社群參與測試、報告問題,並幫助我們推出極其穩定的正式版。立即安裝體驗並告訴我們你的想法。
已經在用 v2 了嗎?升級指南涵蓋了所有破壞性變更和遷移步驟。
Inertia v3 有哪些新功能?
以下是我們在新版 Inertia.js 首個 Beta 版本中釋出的所有內容。
Vite 外掛
在 v2 中配置 Inertia 應用需要一個 resolve 回撥來將頁面名稱對映到元件,一個 setup 回撥來掛載應用,以及一個帶有獨立配置的 SSR 入口點。這些樣板程式碼在不同專案中幾乎完全相同,於是我們想:為什麼不由我們來處理呢?
全新的 @inertiajs/vite 外掛解決了這個問題。只需將該外掛新增到你的 Vite 配置中,並呼叫不帶引數的 createInertiaApp() 即可。
這就是你的完整入口點。該外掛會自動從 ./Pages 目錄解析頁面,處理懶載入和程式碼分割,並配置好 SSR。setup 和 resolve 回撥現在是可選的。你仍然可以提供它們以實現自定義行為,並且可以透過 pages 簡寫指向其他目錄。
開發環境下的 SSR,無需獨立伺服器
在 v2 中,在開發階段執行 SSR 意味著需要構建 SSR 包並啟動一個單獨的 Node.js 程序。有了 Vite 外掛,SSR 在開發環境下可以自動執行。只需執行 npm run dev,你的頁面就會進行服務端渲染。
生產環境的工作流保持不變:使用 vite build && vite build --ssr 進行構建,並使用 php artisan inertia:start-ssr 啟動 SSR 伺服器。
SSR 期間的錯誤報告也進行了全面升級。當元件在伺服器端渲染失敗時,Inertia 現在會記錄元件名稱、URL 和可操作的提示資訊。你可以透過中介軟體或 facade 在特定路由上停用 SSR,並且會觸發 SsrRenderFailed 事件以便監控。
移除 Axios
Inertia 不再內建或依賴 Axios。內建的 XHR 客戶端處理所有內部 HTTP 通訊,從而減小了包體積並減少了依賴。qs 包也被一併移除。對於仍希望使用 Axios 的使用者,我們提供了 Axios 介面卡。
獨立 HTTP 請求
並非 Inertia 應用中的每個請求都需要觸發頁面跳轉。API 呼叫、搜尋介面和外部服務請求不需要 Inertia 的完整頁面生命週期。此前,開發者通常使用 Axios 或 fetch 來處理這些請求,從而失去了 useForm 所提供的響應式狀態管理能力。
全新的 useHttp hook 為普通 HTTP 請求提供了與 useForm 相同的開發體驗。
它具備響應式狀態、錯誤處理、檔案上傳進度和請求取消功能。它還支援樂觀更新和預知 (Precognition) 功能。
樂觀更新
當用戶點選點贊按鈕或切換收藏時,他們不應該為了看到結果而等待伺服器響應。
在任何路由訪問前鏈式呼叫 optimistic() 方法。回撥函式接收當前頁面屬性並返回要立即應用的值。
更新會立即應用。當伺服器響應時,真實資料將接管介面。如果請求失敗,屬性會自動恢復到原始狀態。正在進行的多個樂觀更新會被獨立追蹤,因此併發請求不會相互干擾。
樂觀更新適用於路由訪問、<Form> 元件、useForm 和 useHttp。
即時訪問 (Instant Visits)
即時訪問讓 Inertia 可以在後臺傳送伺服器請求的同時,立即切換到目標頁面元件。使用者會立即看到帶有共享屬性的新頁面,當響應到達時,完整的頁面資料會自動合併。
目標元件會立即渲染共享資料。頁面特定的屬性會在伺服器響應時到達。導航感覺是即時的,儘管完整的伺服器請求仍在後臺進行。
佈局屬性 (Layout Props)
持久化佈局在導航過程中不會重新渲染,這是 Inertia 最強大的功能之一。全新的 useLayoutProps hook 允許佈局宣告頁面可以覆蓋的預設值,從而消除了對事件匯流排或 provide/inject 模式的需求。
頁面透過 setLayoutProps() 更新這些值。支援命名佈局、巢狀佈局和靜態屬性。
異常處理
諸如 404 之類的異常可能發生在 Inertia 中介軟體之外(請求從未到達你的路由),因此錯誤響應無法訪問共享資料或根檢視。這是 v2 中需要變通解決的問題之一。
全新的 handleExceptionsUsing() 方法為你提供了完全的控制權。
顯式呼叫 withSharedData() 會解析 Inertia 中介軟體,並將共享屬性包含在錯誤頁面中。返回 null 則會回退到 Laravel 的預設異常渲染。
關於 Inertia v3 的其他一切
此版本還包含許多其他改進:
- 巢狀屬性型別。
Inertia::optional(),Inertia::defer()和Inertia::merge()現在可在巢狀陣列中工作,並支援點符號語法進行區域性過載。 - 事件重新命名。
invalid和exception現在分別重新命名為httpException和networkError,並新增了支援單次訪問的onHttpException和onNetworkError回撥。 - 預設佈局。 在
createInertiaApp中設定預設佈局,無需在每個頁面定義。 - 表單元件泛型。 提供用於型別安全錯誤和插槽屬性的 TypeScript 泛型。
- 列舉支援。 在
Inertia::render()響應中直接使用 PHP 列舉。 - 僅限 ESM。 所有包現在均以 ES Modules 形式釋出。不再支援 CommonJS 的
require()匯入。 preserveErrors選項。 在區域性過載期間保留驗證錯誤。
破壞性變更
Inertia v3 要求 PHP 8.2+、Laravel 11+、React 19+(React 介面卡)以及 Svelte 5+(Svelte 介面卡)。
其他需要注意的破壞性變更:
- 不再包含 Axios。 請將攔截器遷移到內建的 HTTP 客戶端或使用 Axios 介面卡。
qs包不再整合。 如果你的應用需要它,請直接安裝。Inertia::lazy()在 v2 中已被棄用,現已移除。請改用Inertia::optional()。router.cancel()現在改為router.cancelAll(),並提供對取消請求型別的精細控制。future選項已被移除。 所有 v2 的 future 標誌現在均已預設啟用。- 配置檔案結構已更改。 請使用
php artisan vendor:publish --provider="Inertia\\ServiceProvider" --force重新發布配置。
完整的升級指南詳細涵蓋了每一項變更。