作者：Rahul Chhodde??

現(xiàn)代前端框架與其專用的全?？蚣芡昝来钆洹?React 與 Next.js、Vue 與 Nuxt.js 以及 Svelte 與 SvelteKit。但是，當將 React 等現(xiàn)代前端解決方案與 Laravel 等傳統(tǒng)后端或服務器端框架配對時，同樣的易用性和開箱即用的支持似乎是不可能的。

JavaScript 前端解決方案和傳統(tǒng)后端框架之間的適應性差距由 Inertia.js 填補。在本采用指南中，我們將學習如何使用 Inertia 構建具有傳統(tǒng)后端框架和現(xiàn)代 JavaScript 前端的單頁應用程序 (SPA)，同時維護服務器端路由。

什么是 Inertia.js？

Inertia.js 是一個工具，允許開發(fā)人員使用流行的前端和后端框架構建現(xiàn)代 SPA，而無需中間的 API。 Inertia 由 Jonathan Reinink 創(chuàng)建于 2019 年，其主要思想是在利用現(xiàn)有服務器端框架的同時簡化構建現(xiàn)代 SPA 的過程。

簡單來說，Inertia 就像粘合劑一樣，將服務器端和客戶端框架粘合在一起，確保后端和前端之間的高效通信。借助 Inertia，您無需為前端和后端或服務器端維護兩個不同的代碼庫，而是像單體一樣在單個代碼庫中開發(fā)整個應用程序。

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

最初，Inertia 僅支持 Vue 和 Laravel。隨著其后續(xù)版本的發(fā)展，它不斷發(fā)展并擴展了對更多框架的支持。

現(xiàn)代的 Inertia 整體提供了重要的功能，例如服務器端渲染 (SSR)、自動資產版本控制、頁面組件延遲加載、TypeScript 支持等等。稍后我們將在討論框架集成時探討其框架支持。

Inertia.js 的工作原理

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

• 維護服務器端路由，同時提供類似 SPA 的體驗
• 用小型提取請求替換全頁重新加載
• 接收服務器返回的 JSON 數據
• 需要更少的 JavaScript 來進行水合

當使用 Inertia 支持的應用程序從瀏覽器發(fā)出請求時，它首先到達后端。結果，創(chuàng)建了 Inertia 響應，首先通過 Inertia 客戶端將完整的 HTML 文檔與 Inertia JavaScript 庫返回到瀏覽器。

對于后續(xù)導航，Inertia 客戶端發(fā)出獲取請求并接收從服務器返回的 JSON 數據。然后，客戶端使用收到的數據更新前端，并將更改反映在應用程序上，而無需重新加載整個頁面。

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

進一步閱讀：

• Inertia.js 簡介

為什么選擇 Inertia.js？

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

Inertia 是為 Laravel 量身定制的，為 Laravel 項目提供了更高的穩(wěn)定性。如果您是一名 Laravel 開發(fā)人員，并且想要做的不僅僅是 Blade 模板默認提供的功能，那么 Inertia 可能是您想要嘗試的東西。

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

Inertia.js 的缺點

SPA 一般有一些已知的缺點，我們不會在這里討論。相反，我們將討論 Inertia 作為開發(fā)實用程序的缺點。

靈活性較差

使用 Inertia，您可以在單個代碼庫中維護應用程序的前端和后端。這種緊密耦合使得 Inertia 不適合需要單獨維護前端和后端以實現(xiàn)更好的可維護性、關注點分離、可擴展性、獨立開發(fā)、技術堆棧靈活性等原因的項目。

開發(fā)者經驗

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

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

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

小社區(qū)

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

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

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

進一步閱讀：

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

技術考慮

使用 Inertia 首先使應用程序離線可能會很復雜，因為使用此工具建立合理的緩存策略并不簡單。您還應該記住，Inertia 默認情況下會在每個請求上發(fā)送完整頁面組件，從而增加有效負載大小，這可以通過部分重新加載來解決。

Inertia.js 的優(yōu)點

Inertia 與傳統(tǒng)的客戶端渲染 SPA 相比具有一些普遍優(yōu)勢。讓我們一一討論它的一些主要優(yōu)點。

無縫集成

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

Laravel 允許您使用 Vite 構建您的資產，與基于 Webpack 的 Laravel Mix 相比，為您提供更快、更高效的開發(fā)體驗。如果您的目標是實現(xiàn)基于 JavaScript 的前端，那么基于 Vite 的資產捆綁非常適合您。

進一步閱讀：

• Inertia.js、Vue.js 和 AdonisJs 入門
• 使用 Laravel 和 Vue 創(chuàng)建單頁應用程序

簡化開發(fā)

盡管如上所述開發(fā)人員體驗稍差，但 Inertia 提供了簡化的集成，無需單獨的 API 即可使前端和后端協(xié)同工作。 Inertia 允許您使用入門套件并提供手動安裝指南來設置客戶端和服務器端環(huán)境以進行開發(fā)。

表現(xiàn)

Inertia 應用程序不是將帶有大量 JavaScript 包的完全服務器渲染的 HTML 發(fā)送到客戶端，而是接收帶有初始 JSON 數據的最小 HTML shell，這在客戶端上渲染速度相對較快。

這使得基于 Inertia 的應用程序的初始性能略好于常規(guī)客戶端渲染的 SPA，而不會增加復雜性。它還提高了整體質量更高的用戶體驗，并改進了首次內容繪制（First Contentful Paint），這是一個重要的核心網絡重要指標。

進一步閱讀：

• SPA 的核心 Web Vitals 最佳實踐

SEO友好

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

這兩個功能結合起來可以帶來更好的 SEO，并使 Inertia.js 應用程序比傳統(tǒng) SPA 更具優(yōu)勢。

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

捆綁尺寸

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

文檔

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

Inertia.js 入門

讓我們學習如何使用兩種最流行的前端和后端解決方案設置 Inertia：基于 Laravel 的后端和由 React 驅動的前端。您可以在此 GitHub 存儲庫中找到本教程中涵蓋的所有代碼。

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

服務器端安裝

假設你的機器上安裝了 Laravel，讓我們使用 Laravel 安裝程序命令創(chuàng)建一個新的 Laravel 項目：

laravel new

您應該在開發(fā)者終端中看到如下內容：

在終端中執(zhí)行該命令并為您的項目提供名稱后，安裝程序將要求您選擇啟動工具包和測試框架、初始化 Git 存儲庫，并完成其他設置流程。

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

進一步閱讀：

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

安裝步驟結束時，系統(tǒng)將提示您選擇一個數據庫。我選擇了 pgsql，因為我使用 PostgreSQL 來解釋本文。根據您的數據庫偏好選擇您的數據庫。

接下來，我們應該通過在終端中運行以下 Composer 命令來安裝 Laravel 的 Inertia.js 集成：

composer require inertiajs/inertia-laravel

上面的命令將安裝 Inertia 的 Laravel 適配器及其依賴項。它還將為 Laravel 和 Inertia 的合作奠定基礎。

之后，讓我們添加 Inertia 中間件來處理 Laravel 中的 Inertia 請求。使用以下 artisan 命令來執(zhí)行此操作：

laravel new

客戶端安裝

我們將使用 React 來處理頁面和組件，而不是 Laravel 的默認 Blade 模板。讓我們進入項目文件夾并使用以下命令安裝 React 和 React DOM。使用您選擇的 Node 包管理器來執(zhí)行此操作：

composer require inertiajs/inertia-laravel

我們還要安裝 Vite 的 React 插件作為開發(fā)依賴項，因為我們將在整個項目中使用 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 腳本來在單個終端窗口中一起運行這些命令，但為了讓事情簡單明了，現(xiàn)在讓我們在兩個單獨的終端中運行它們。

這些命令執(zhí)行成功后，可以看到兩個本地URL。運行 Laravel 來查看您的 Laravel 應用程序的外觀。至此，您已經成功使用 Inertia 設置了一個基本應用程序！

Inertia.js 的主要功能

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

頁面和布局

為了更好地組織不同的布局和頁面，請在 resources/js 目錄中創(chuàng)建兩個子目錄。您還可以在此處的單獨目錄中管理組件，并根據需要在頁面中使用它們。

這是我們主要布局的一個簡單示例：

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 現(xiàn)在可以用作我們頁面中的組件，如以下代碼所示：

laravel new

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

鏈接和路由

使用傳統(tǒng)的 Laravel 路由，可以輕松創(chuàng)建新路由并掛鉤到我們在上一節(jié)中了解的頁面中。盡管它不是基于文件的，但路由管理起來相當簡單。如果您使用過 Express 和 Fastify 等基于 JavaScript 的后端框架，那么您已經熟悉 Laravel 中路由的工作方式。

導航到routes/web.php文件，添加新路由，并使用Inertia的render方法渲染相關頁面，如下代碼所示：

composer require inertiajs/inertia-laravel

Inertia 中的動態(tài)鏈接類似于 React 和 Next，可以使用 Inertia 的 Link 組件來完成，如下所示：

php artisan inertia:middleware

下面的屏幕截圖演示了我們剛剛在上面的代碼塊中創(chuàng)建的導航的類似 SPA 的動態(tài)行為：

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

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

這是一個簡單的示例，它發(fā)出 GET 和 POST 請求來加載和發(fā)送用戶數據。請注意，GET 請求由 Inertia 隱式處理，而我們使用 useForm 掛鉤中的 post 方法發(fā)出 POST 請求以將數據發(fā)送到服務器：

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 文件，然后就可以開始了。

有了現(xiàn)有的數據庫，您可以使用 Laravel 的遷移系統(tǒng)來定義所需的數據庫模式。我沒有數據庫，所以我創(chuàng)建了一個數據庫，并使用 Laravel Seeder 機制在其中填充了一些虛假的用戶數據，以在前端顯示。以下是我之后遵循的一些步驟：

• 在應用程序目錄中為我的用戶數據創(chuàng)建了一個模型，并創(chuàng)建了一個 HTTP 控制器來處理有關此數據的數據庫請求
• 在 resources/js/Pages 目錄中創(chuàng)建了一個 Users 頁面，并為其提供了一個帶有用戶數組的 prop。該用戶數組通過本質上使用 Inertia 發(fā)出的 GET 請求獲取所需的數據。我們還可以發(fā)出 POST 請求將數據添加到數據庫
• 在routes/web.php 文件中定義用戶路由并將我們的HTTP 控制器鏈接到它

對于 Laravel 生態(tài)系統(tǒng)的新手或不經常使用 Laravel 數據庫的人來說，遷移和填充數據庫時可能需要更多的時間。在這種情況下，清除配置緩存可能會極大地幫助消除由緩存的配置選項引起的錯誤。

Inertia.js 用例

慣性的潛在應用是多種多樣的。使用 Inertia 將 Laravel 與現(xiàn)代 JavaScript 前端配對，可以簡化具有強大后端功能的單體應用程序的全棧開發(fā)。

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

• 不想依賴 Blade 進行模板化并希望使用強大的解決方案來處理客戶端功能的應用程序
• 使用 Laravel 作為后端但希望利用主要為基于 JavaScript 的前端框架制作和維護的現(xiàn)代庫的舊應用程序
• 計劃遷移到基于 Laravel 的后端以享受傳統(tǒng)服務器技術而不是無服務器技術提供的優(yōu)勢的現(xiàn)代應用程序
• SPA 想要在搜索引擎上獲得更好的可見性以及 SSR 的性能優(yōu)勢
• 對于那些熱愛并想要同時使用 PHP 和 JavaScript 的人

Inertia.js vs. Livewire vs. Hybridly

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

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

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

結論

在本采用指南中，我們了解了 Inertia.js 是什么以及如何使用它來利用 Laravel 等傳統(tǒng)后端框架和 React 等現(xiàn)代前端庫創(chuàng)建混合應用程序。

我們了解了使用 Inertia 的優(yōu)缺點、它的一些實際應用以及使用 Laravel 設置它的示例。如果您在遵循本指南時遇到困難，請考慮為我們介紹的項目克隆此 GitHub 存儲庫，或者發(fā)表評論，我很樂意為您提供幫助。

---

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

毫無疑問，前端變得越來越復雜。當您向應用程序添加新的 JavaScript 庫和其他依賴項時，您需要更多的可見性以確保您的用戶不會遇到未知問題。

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

LogRocket 可以與任何應用程序完美配合，無論框架如何，并且具有用于記錄來自 Redux、Vuex 和 @ngrx/store 的其他上下文的插件。您無需猜測問題發(fā)生的原因，而是可以匯總并報告問題發(fā)生時應用程序所處的狀態(tài)。 LogRocket 還監(jiān)控您的應用程序的性能，報告客戶端 CPU 負載、客戶端內存使用情況等指標。

自信地構建 - 開始免費監(jiān)控。

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