Inertia.js 採用指南：概述、範例和替代方案

作者：Rahul Chhodde✏️

現代前端框架與其專用的全端框架完美搭配——例如 React 與 Next.js、Vue 與 Nuxt.js 以及 Svelte 與 SvelteKit。但是，當 React 等現代前端解決方案與 Laravel 等傳統後端或伺服器端框架配對時，同樣的易用性和開箱即用的支援似乎是不可能的。

JavaScript 前端解決方案和傳統後端框架之間的適應性差距由 Inertia.js 填補。在本採用指南中，我們將學習如何使用 Inertia 建立具有傳統後端框架和現代 JavaScript 前端的單頁應用程式 (SPA)，同時維護伺服器端路由。

什麼是 Inertia.js？

Inertia.js 是一個工具，允許開發人員使用流行的前端和後端框架來建立現代 SPA，而無需中間的 API。 Inertia 由 Jonathan Reinink 創建於 2019 年，其主要思想是在利用現有伺服器端框架的同時簡化建構現代 SPA 的過程。

簡單來說，Inertia 就像黏合劑一樣，將伺服器端和客戶端框架黏合在一起，確保後端和前端之間的高效通訊。借助 Inertia，您無需為前端和後端或伺服器端維護兩個不同的程式碼庫，而是像單體一樣在單一程式碼庫中開發整個應用程式。

Inertia.js 隨著時間的推移發生了怎樣的變化？

最初，Inertia 僅支援 Vue 和 Laravel。隨著其後續版本的發展，它不斷發展並擴展了對更多框架的支援。

現代的 Inertia 整體提供了重要的功能，例如伺服器端渲染 (SSR)、自動資產版本控制、頁面元件延遲載入、TypeScript 支援等等。稍後我們將在討論框架整合時探討其框架支援。

Inertia.js 的工作原理

Inertia 的作用就像前端和後端之間的適配器。它與普通SPA有以下幾個方面的不同：

• 維護伺服器端路由，同時提供類似 SPA 的體驗
• 以小型提取請求取代全頁重新載入
• 接收伺服器傳回的 JSON 資料
• 需要較少的 JavaScript 來進行水合

當使用 Inertia 支援的應用程式從瀏覽器發出請求時，它首先到達後端。結果，創建了 Inertia 回應，首先透過 Inertia 用戶端將完整的 HTML 文件與 Inertia JavaScript 庫傳回瀏覽器。

對於後續導航，Inertia 用戶端發出獲取請求並接收從伺服器傳回的 JSON 資料。然後，用戶端使用收到的資料更新前端，並將變更反映在應用程式上，而無需重新載入整個頁面。

這是一個以視覺化方式解釋整個過程的流程圖：

進一步閱讀：

• Inertia.js 簡介

為什麼選擇 Inertia.js？

如果您必須為 SPA 使用傳統的後端框架，但可以自由地處理前端，那麼您應該考慮使用 Inertia 或類似的工具。

Inertia 是為 Laravel 量身定制的，為 Laravel 計畫提供了更高的穩定性。如果您是 Laravel 開發人員，想要做的不僅僅是 Blade 模板預設提供的功能，那麼 Inertia 可能是您想要嘗試的東西。

您可以探索更多慣性可以成為您朋友的用例。接下來的兩節介紹使用 Inertia 的一些優點和缺點，這將幫助您做出明智的決定，選擇它進行應用程式開發。

Inertia.js 的缺點

SPA 一般有一些已知的缺點，我們不會在這裡討論。相反，我們將討論 Inertia 作為開發實用程式的缺點。

靈活性較差

使用 Inertia，您可以在單一程式碼庫中維護應用程式的前端和後端。這種緊密耦合使得 Inertia 不適合需要單獨維護前端和後端以實現更好的可維護性、關注點分離、可擴展性、獨立開發、技術堆疊靈活性等原因的專案。

開發者經驗

使用像 Inertia 這樣的工具可以為您的堆疊添加更多實用工具來探索和學習。了解慣性特定的模式和約定有一個適度的學習曲線，這可能有點煩人和耗時。

由於前端和後端採用 Inertia 等工具還不是主流，因此沒有標準的方法來使用它們。因此，放棄 Inertia 需要進行大量的重構，尤其是在前端。

此外，測試複雜性，尤其是 API 和單元測試，必然會增加，因為前端和後端之間的邊界在一個整體中重合。

小社區

Inertia 在 GitHub 上擁有超過 6,000 顆星和超過 85 名貢獻者。它的 Laravel 轉接器擁有超過 2,000 顆星。所有這些統計數據加起來遠低於同類工具，這些工具不提供與 Inertia 一樣多的功能和框架支援。

因此，在某些情況下，您可能想用它來建立一些特定的東西，但卻找不到足夠的參考資料和指南來遵循。

請參考下表，以了解 Inertia.js 和 Livewire 等一些競爭者之間的直接比較。

進一步閱讀：

• Livewire 與 Inertia.js：比較 Laravel 前端

技術考慮

使用 Inertia 首先使應用程式離線可能會很複雜，因為使用此工具建立合理的快取策略並不簡單。您還應該記住，Inertia 預設會在每個請求上傳送完整頁面元件，從而增加有效負載大小，這可以透過部分重新載入來解決。

Inertia.js 的優點

Inertia 與傳統的客戶端渲染 SPA 相比具有一些普遍優勢。讓我們一一討論它的一些主要優點。

無縫集成

Inertia 與流行的前端和後端框架完美集成，並在其演示版本中為 Vue 提供第一手支援。支援的框架和函式庫（包括前端和後端）包括 Laravel、Rails、Phoenix、Django、React、Vue 和 Svelte。

Laravel 讓您可以使用 Vite 建立您的資產，與基於 Webpack 的 Laravel Mix 相比，為您提供更快、更有效率的開發體驗。如果您的目標是實現基於 JavaScript 的前端，那麼基於 Vite 的資產捆綁非常適合您。

進一步閱讀：

• Inertia.js、Vue.js 和 AdonisJs 入門
• 使用 Laravel 和 Vue 建立單頁應用程式

簡化開發

儘管如上所述開發人員體驗稍差，但 Inertia 提供了簡化的集成，無需單獨的 API 即可使前端和後端協同工作。 Inertia 可讓您使用入門套件並提供手動安裝指南來設定用戶端和伺服器端環境以進行開發。

表現

Inertia 應用程式不是將具有大量 JavaScript 套件的完全伺服器渲染的 HTML 發送到客戶端，而是接收帶有初始 JSON 資料的最小 HTML shell，這在客戶端上渲染速度相對較快。

這使得基於 Inertia 的應用程式的初始效能略好於常規客戶端渲染的 SPA，而不會增加複雜性。它還提高了整體品質更高的使用者體驗，並改進了首次內容繪製（First Contentful Paint），這是一個重要的核心網路重要指標。

進一步閱讀：

• SPA 的核心 Web Vitals 最佳實踐

SEO友善

基於慣性的應用程式使用伺服器端路由，這會產生更整潔、更容易抓取的 URL。這使得處理每個頁面的元資料變得非常簡單。此外，正如上一點所討論的，由於發送到客戶端的初始資料量很少，這些應用程式可能具有更好的 FCP 分數。

這兩個功能結合起來可以帶來更好的 SEO，並使 Inertia.js 應用程式比傳統 SPA 更具優勢。

提示：如果客戶端渲染 (CSR) 對 FCP 指標產生負面影響，您可以選擇使用 Inertia.js 的 SSR 外掛程式的完全伺服器渲染應用程式來提高分數。

捆綁尺寸

由於 Inertia.js 充當前端和後端之間的適配器，因此它非常緊湊（應該如此），壓縮和壓縮後僅重約 15kB。

文件

Inertia 文件可讓您立即開始使用，尤其是在使用 Laravel 作為後端框架時。它還具有舊版本的升級指南，涵蓋從一般到高級的概念，全部集中在一個地方。

Inertia.js 入門

讓我們學習如何使用兩種最受歡迎的前端和後端解決方案來設定 Inertia：基於 Laravel 的後端和由 React 驅動的前端。您可以在此 GitHub 儲存庫中找到本教學中涵蓋的所有程式碼。

請注意，為了簡單起見，此設定不涉及使用 TypeScript。

伺服器端安裝

假設你的機器上安裝了 Laravel，讓我們使用 Laravel 安裝程式指令建立一個新的 Laravel 專案：

laravel new

您應該在開發者終端機中看到以下內容：

在終端機中執行該命令並為您的專案提供名稱後，安裝程式將要求您選擇啟動工具包和測試框架、初始化 Git 儲存庫，並完成其他設定流程。

像 Breeze 或 Jetstream 這樣的入門套件提供了一些現成的基於 Inertia.js 的腳手架和演示應用程序，但我們不想要這樣。我們將從頭開始設定。

進一步閱讀：

• Laravel Breeze 的 Inertia-React 堆疊與 Next.js 和 Gatsby
• Laravel 與 AdonisJs：你該使用哪一個？

安裝步驟結束時，系統會提示您選擇一個資料庫。我選擇了 pgsql，因為我使用 PostgreSQL 來解釋這篇文章。根據您的資料庫偏好選擇您的資料庫。

接下來，我們應該透過在終端機中執行以下 Composer 命令來安裝 Laravel 的 Inertia.js 整合：

composer require inertiajs/inertia-laravel

上面的指令將安裝 Inertia 的 Laravel 轉接器及其相依性。它還將為 Laravel 和 Inertia 的合作奠定基礎。

之後，讓我們加入 Inertia 中間件來處理 Laravel 中的 Inertia 請求。使用以下 artisan 命令來執行此操作：

laravel new

客戶端安裝

我們將使用 React 來處理頁面和元件，而不是 Laravel 的預設 Blade 範本。讓我們進入專案資料夾並使用以下命令安裝 React 和 React DOM。使用您選擇的 Node 套件管理器來執行此操作：

composer require inertiajs/inertia-laravel

我們也要安裝 Vite 的 React 外掛程式作為開發依賴項，因為我們將在整個專案中使用 Vite 作為我們的資產管理器：

php artisan inertia:middleware

最後，使用以下指令加入對 React 的 Inertia 支援：

pnpm add react react-dom

我還在這個設定中使用了 Tailwind CSS，這是完全可選的。如果您也想安裝 Tailwind CSS，則與使用 React 或 Vue 應用程式安裝 Tailwind CSS 時遵循的步驟相同。

配置

首先，在resources/js目錄中找到app.js文件，將其重新命名為app.jsx，並將其內容替換為以下內容：

pnpm add --save-dev @vitejs/plugin-react

上述更改將幫助 Inertia 識別我們的頁面並將其連結到正確的路線。

接下來，我們將 resources/view 目錄中的welcome.blade.php 檔案重新命名為 app.blade.php，並將其內容替換為以下內容：

pnpm add @inertiajs/react

請注意，在網頁的基本 HTML 結構中，此檔案包含一些注入某些腳本以執行重新載入、新增腳本等所需的 Inertia 和 Vite 指令。

接下來，在 bootstrap/app.php 檔案中加入所需的中間件來處理 Inertia 特定的請求：

import { createInertiaApp } from "@inertiajs/react";
import { createRoot } from "react-dom/client";
import "../css/app.css";

createInertiaApp({
  resolve: (name) => {
    const pages = import.meta.glob("./Pages/**/*.jsx", { eager: true });
    return pages[`./Pages/${name}.jsx`];
  },
  setup({ el, App, props }) {
    createRoot(el).render(<App {...props} />);
  },
});

我們也可以設定 React 外掛程式來與 Vite 搭配使用，享受它提供的好處：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  @viteReactRefresh
  @vite('resources/js/app.jsx')
  @inertiaHead
</head>
<body>
  @inertia
  <div id="app"></div>
</body>
</html>

最後，讓我們使用以下指令執行 Laravel 和 React：

<?php
use Illuminate\Foundation\Application;
use Illuminate\Foundation\Configuration\Exceptions;
use Illuminate\Foundation\Configuration\Middleware;
use App\Http\Middleware\HandleInertiaRequests;

return Application::configure(basePath: dirname(__DIR__))
  ->withRouting(
    web: __DIR__.'/../routes/web.php',
    commands: __DIR__.'/../routes/console.php',
    health: '/up',
  )
  ->withMiddleware(function (Middleware $middleware) {
    $middleware->web(append: [
        HandleInertiaRequests::class,
    ]);
  })
  ->withExceptions(function (Exceptions $exceptions) {
    //
  })->create();

我們可以編寫一個 Shell 腳本來在單一終端機視窗中一起執行這些命令，但為了讓事情簡單明了，現在讓我們在兩個單獨的終端機中運行它們。

這些指令執行成功後，可以看到兩個本地URL。運行 Laravel 來查看您的 Laravel 應用程式的外觀。至此，您已經成功使用 Inertia 設定了一個基本應用程式！

Inertia.js 的主要功能

您可以使用 Inertia 應用程式做很多事情。讓我們來看看您應該了解的一些突出功能。

頁面和佈局

為了更好地組織不同的佈局和頁面，請在 resources/js 目錄中建立兩個子目錄。您還可以在此處的單獨目錄中管理元件，並根據需要在頁面中使用它們。

這是我們主要佈局的一個簡單範例：

import { defineConfig } from "vite";
import laravel from "laravel-vite-plugin";
import react from "@vitejs/plugin-react";

export default defineConfig({
  plugins: [
    laravel({
      input: "resources/js/app.jsx",
      refresh: true,
    }),
    react(),
  ],
  resolve: {
    alias: {
      "@": "/resources/js",
    },
  },
});

這基本上是一個用作基本佈局的元件，因此被放置在專用的佈局資料夾中。 MainLayout 現在可以用作我們頁面中的元件，如下列程式碼所示：

laravel new

以下是 MainLayout.jsx 和 About.jsx 如何使用 Tailwind CSS 提供的樣式一起形成一個工作頁面：

連結和路由

使用傳統的 Laravel 路由，可以輕鬆建立新路由並掛鉤到我們在上一節中了解的頁面中。儘管它不是基於檔案的，但路由管理起來相當簡單。如果您使用過 Express 和 Fastify 等基於 JavaScript 的後端框架，那麼您已經熟悉 Laravel 中路由的工作方式。

導覽至routes/web.php文件，新增路由，並使用Inertia的render方法渲染相關頁面，如下程式碼所示：

composer require inertiajs/inertia-laravel

Inertia 中的動態連結類似於 React 和 Next，可以使用 Inertia 的 Link 元件來完成，如下所示：

php artisan inertia:middleware

下面的螢幕截圖演示了我們剛剛在上面的程式碼區塊中創建的導航的類似 SPA 的動態行為：

HTTP 請求（GET/POST/非 GET 請求）

Inertia 提供了一個 useForm 鉤子來處理 GET 和 POST 請求，以處理狀態和表單提交。它還提供了 usePage 掛鉤，它允許您存取從伺服器傳遞到客戶端的共享數據，例如成功或失敗訊息。

這是一個簡單的範例，它發出 GET 和 POST 請求來載入和發送使用者資料。請注意，GET 請求由 Inertia 隱式處理，而我們使用 useForm 掛鉤中的 post 方法發出 POST 請求以將資料傳送到伺服器：

pnpm add react react-dom

使用這種方法，我們可以組合一個頁面來從資料庫中獲取資料列表，將其顯示在 HTML 表格中，並使用如下所示的表單將更多此類資料添加到資料庫中：

進度指標

Inertia.js 提供基於 NProgress 的進度指示。您可以在建立 App.jsx 檔案時啟用此功能，並為進度指示器提供設定：

pnpm add --save-dev @vitejs/plugin-react

如果您不熟悉 NProgress 載入動畫的樣子，請看一下：

資料庫集成

如果您經常使用 Laravel，那麼將資料庫整合並使用到您的 Inertia 設定中並不需要花費太多時間。只需在 .env 文件中添加所需的資料庫憑證，確保您使用正確的資料庫驅動程序，查看 config/database.php 文件，然後就可以開始了。

有了現有的資料庫，您可以使用 Laravel 的遷移系統來定義所需的資料庫模式。我沒有資料庫，所以我創建了一個資料庫，並使用 Laravel Seeder 機制在其中填充了一些虛假的用戶數據，以在前端顯示。以下是我之後遵循的一些步驟：

• 在應用程式目錄中為我的使用者資料建立了一個模型，並建立了一個 HTTP 控制器來處理有關此資料的資料庫請求
• 在 resources/js/Pages 目錄中建立了一個 Users 頁面，並為其提供了一個帶有使用者陣列的 prop。此使用者數組透過本質上使用 Inertia 發出的 GET 請求來獲取所需的資料。我們也可以發出 POST 請求將資料新增至資料庫
• 在routes/web.php 檔案中定義使用者路由並將我們的HTTP 控制器連結到它

對於 Laravel 生態系統的新手或不經常使用 Laravel 資料庫的人來說，遷移和填充資料庫時可能需要更多的時間。在這種情況下，清除配置快取可能會極大地幫助消除由快取的配置選項引起的錯誤。

Inertia.js 用例

慣性的潛在應用是多種多樣的。使用 Inertia 將 Laravel 與現代 JavaScript 前端配對，可以簡化具有強大後端功能的單體應用程式的全端開發。

雖然它不適合每個團隊或情況，但在以下一些用例中您可能會發現慣性是一個不錯的選擇：

• 不想依賴 Blade 進行模板化並希望使用強大的解決方案來處理客戶端功能的應用程式
• 使用 Laravel 作為後端但希望利用主要為基於 JavaScript 的前端框架製作和維護的現代庫的舊應用程式
• 計劃遷移到基於 Laravel 的後端以享受傳統伺服器技術而不是無伺服器技術提供的優勢的現代應用程式
• SPA 想要在搜尋引擎上獲得更好的可見度以及 SSR 的效能優勢
• 對於那些熱愛並想要同時使用 PHP 和 JavaScript 的人

Inertia.js vs. Livewire vs. Hybridly

Inertia 並不是橋接伺服器端和客戶端框架和函式庫的唯一解決方案。 Livewire 和 Hybridly 是另外兩種流行的工具，各有優點和缺點。在比較您的選擇時，您可能需要考慮：

• 社區 — 與 Livewire 相比，Inertia.js 的社區相對較小，但比 Hybridly 更好。
• 功能 — Livewire 和 Hybridly 不提供實現前端框架的支持，而 Inertia.js 以其對主要基於 JavaScript 的前端解決方案的支持而聞名。
• 效能 — 這主要取決於實現，但基於Inertia.js 的SPA 可以提供更好的感知效能，而使用Livewire 和Hybridly 的伺服器渲染應用程式可以更好，因為大多數頁面都是伺服器渲染的.
• 文件 — 與 Hybridly 相比，Livewire 和 Inertia.js 擁有很好的文檔，Hybridly 相當新，還有進一步改進的空間。

此表提供了這三者如何比較的有用快照，以進一步告知您的決定：

Feature	Inertia.js	Livewire	Hybridly
Server-side framework	Laravel, Rails	Laravel only	Laravel only
Client-side framework	Vue.js, React, Svelte	None (PHP-based)	Vue.js
SPA-like experience	Yes	Yes	Yes
Server-side rendering (SSR)	Optional	Yes	Yes
Real-time updates	No (needs additional setup)	Yes	Yes
Full-page reloads	No	No	No
Learning curve	Moderate	Low	Moderate
Component-based architecture	Yes	Yes	Yes
State management	Client-side	Server-side	Both
SEO-friendly	Good	Excellent	Excellent
Backend-driven UI	Partial	Full	Full
Progressive enhancement	Limited	Yes	Yes
File uploads	Supported	Native support	Supported
Pagination	Supported	Native support	Supported
Form handling	Client-side	Server-side	Both
Authentication	Supported	Native support	Supported
Authorization	Supported	Native support	Supported
Testing	Both client & server	Server	Both client and server
Ecosystem/Community	Small	Large	Small (newer)
Performance	Very good	Good	Very good
Bundle size	Larger (due to JS framework)	Smaller	Moderate
Offline support	Possible	Limited	Possible
Mobile app development	Possible	Not ideal	Possible

結論

在本採用指南中，我們了解了 Inertia.js 是什麼以及如何使用它來利用 Laravel 等傳統後端框架和 React 等現代前端庫創建混合應用程式。

我們了解了使用 Inertia 的優缺點、它的一些實際應用以及使用 Laravel 設定它的範例。如果您在遵循本指南時遇到困難，請考慮為我們介紹的專案複製此 GitHub 儲存庫，或發表評論，我很樂意為您提供協助。

---

您是否添加新的 JS 庫來建立新功能或提高效能？如果他們反其道而行怎麼辦？

毫無疑問，前端變得越來越複雜。當您為應用程式新增新的 JavaScript 程式庫和其他依賴項時，您需要更多的可見性以確保您的使用者不會遇到未知問題。

LogRocket 是一個前端應用程式監控解決方案，可讓您重播 JavaScript 錯誤，就像它們發生在您自己的瀏覽器中一樣，以便您可以更有效地對錯誤做出反應。

LogRocket 可以與任何應用程式完美配合，無論框架如何，並且具有用於記錄來自 Redux、Vuex 和 @ngrx/store 的其他上下文的插件。您無需猜測問題發生的原因，而是可以匯總並報告問題發生時應用程式所處的狀態。 LogRocket 還監控您的應用程式的效能，報告客戶端 CPU 負載、客戶端記憶體使用量等指標。

自信地建造 - 開始免費監控。

以上是Inertia.js 採用指南：概述、範例和替代方案的詳細內容。更多資訊請關注PHP中文網其他相關文章！