Livewire 还是 Inertia.js?

Laravel

最近，我从 Laravel 开发人员那里收到了很多这样的问题：『我应该学习/使用什么 - Livewire 还是 Inertia.js?』当然，答案是非常有个性的，但是让我试着比较它们，为决策提供更多的背景。

故事背景：Livewire/Inertia 解决了什么问题？

在过去几年中，单页应用程序 (SPA) 变得流行起来。你加载 JavaScript 和资产一次，然后页面上的所有链接都不会重新加载整个页面，而是仅重新加载某些部分。用户体验变得更好，但问题是他们需要花费大量时间才能正确创建。你需要照顾两个独立的部分：前端和后端，然后是它们之间的链接，包括路由、安全等。所以，在某些时候，一些开发人员想以某种方式简化它。这就是 Livewire 和 Inertia.js。两者诞生的方式时间相近，并且后来都变得非常流行。

Livewire 和 Inertia 有着非常相似的目标：简化 SPAs 的创建。然而，他们的做法不同。Livewire 专注于 Laravel 开发人员，因此它们可以只使用后端，而不使用 JavaScript。Inertia 适用于希望简化工作流程的 Vue 或 React 开发人员：不创建单独的 API，不处理路由、状态管理和其他挑战。

因此，目标是相似的，但受众是不同的。您甚至可以比较 URL：

laravel-livewire.com ( URL 中的『laravel』)
inertiajs.com ( URL 中的『js』)

简单：Livewire 是后台用户的舒适区

如果您是后台用户，需要快速创建一个项目，只需页面上的一些动态元素，Livewire 可能是您最好的解决方案。它不会让你走出 Laravel 的舒适区：你会继续编写后端 Laravel 代码，创建 PHP 类和 Blade 文件。因此，对于 Laravel 开发人员来说，采用 Livewire 通常比 Inertia 更快。

Inertia 有一个先决条件：你需要熟悉 Vue 或 React 等前端。因此，根据定义，它比 Livewire 更复杂，需要更多的前端基础。

设前后顺序的比较：

LiveWire 的设置:

通过 composer 安装 Livewire 包
在页面主布局中添加 2 个 Blade 指令

Inertia Vue 的设置:

通过 composer 安装 Inertia 包
在主布局中添加 2 个 Blade 指令
设置 Inertia 中间件
安装客户端适配器：npm install @inertiajs/inertia @inertiajs/inertia-vue3
使用createInertiaApp() 方法更新 resources/js/app.js

如你所见，使用 Inertia 有更多的准备步骤，你需要熟悉 Laravel 项目中所有 Vue 设置的工作原理，包括主布局，以及诸如 id="app" 之类的东西。

那么，如何创建 Livewire/Inertia 组件？

新增 Livewire 组件:

使用 Artisan 创建 Livewire 组件
用逻辑填充 Livewire 组件类及其 Blade
使用@livewire 或<livewire> 调用 Livewire 组件
在组件之间构建导航/路由系统

新增 Inertia 组件:

创建一个带有逻辑和可视化模板的 Vue.js 组件
使用 Inertia::render() 调用 Inertia 组件
在组件之间构建导航/路由系统

从上面内容，看上去似乎工作量大致相同，只是 Inertia 没有 Artisan 命令来创建其组件。

但在实际上，对于 Laravel 开发人员来说，停留在 Laravel 类或 Blade 结构中比使用 <template> 和 <script> 创建一个新的 Vue 文件要少很多步骤。这样操作起来更快。

但是，如果开发人员可以称自己为全栈并每天使用 Vue.js，那么他们采用 Inertia 方式就很容易了。

性能表现

对 Livewire 的一个典型批评是它向服务器发出了过多的请求，尤其是如果开发人员不小心对 wire:model 附加过多选项的时候。事实上，它可能会在不需要的情况下发出太多请求。

这与对 Eloquent 的批评类似：经验不足的开发人员往往会忽视性能，他们只是让代码可以正常运行起来，却让代码在 Eloquent 的底层执行可能有数百个未优化的 SQL 查询。

甚至 Laravel 请求和结果的负载也更大：Livewire 下载代码块或组件的完整 HTML，而 Inertia 处理 JSON 作为结果。

因此，就性能而言，默认 Inertia 行为可能是一种更好的方法。但是，在大多数情况下，您的用户不会注意到它，尤其是在较小的项目上。另外，使用 Livewire，你可以优化许多内容来提高性能。

搜索引擎 SEO 优化: 理论上 Livewire 更好。

我要诚实的告诉你：我不认为你应该依赖单页应用程序的 SEO。如果您的页面非常动态，有很多可移动的地方，它更像一个应用程序而不是一个网站。见鬼，它们甚至被称为『单页面应用』。以我的经验， SPAs 主要用于管理数据，通常受身份验证机制保护，因此人们可以单击以执行操作，而不是获得可爬虫的网站。

也就是说，可能会有一个同时需要动态行为和搜索引擎结果的项目。为此，最好使用服务器端渲染，这样搜索引擎才能更好的爬虫。

Livewire 默认使用服务器端渲染，并下载完整的 HTML，可供谷歌和其它爬虫程序读取。因此，我在上面提到的性能问题，在 SEO 方面成为一个优势。

默认情况下，Inertia 可与客户端呈现: 因此每个服务器调用都返回 JSON，它在浏览器中被 “神奇的” 解析。因此，搜索引擎很难正确的阅读该页面内容。也就是说，在 2022 年 1 月, Inertia 推出了服务器渲染功能。但是，设置它可能需要额外的工作：它将请求移交给单独的 Node.js 服务，以便它可以呈现页面，并在完成后将呈现的 HTML 返回给浏览器。

所有关于 SEO 的想法几乎都是理论上的。不可能预先知道某个特定的引擎会如何抓取和阅读你网站的内容。人们会说，多年来，Google 在阅读动态网站方面变得更好，但是每个网站案例都是独特的。

职业机会：每个人都想要全栈开发人员

到目前为止，如果您是一名 Laravel 开发人员，只需要最少的前端经验，您就可以使用 Livewire 创建出色的项目。这是真的，但是它限制了你未来的工作机会。

如果你试图在求职网站或自由职业者论坛上寻找 Livewire 相关的工作，几乎没有。主要是因为 Livewire 被认为是 Laravel 之上的一个小型附加工具，其用例非常有限。

然而，Inertia，是基于流行的 JavaScript 框架，比如 Vue 和 React。同样你也不会找到太多关于 Inertia 的工作，但你会被迫跳出 Laravel 舒适区，进入一个全栈的世界，这反而会为你打开机会的海洋：如今，每个公司都想雇佣全栈开发人员。

从这个角度来看，如果你是一个自由职业者，完全负责你的技术决策，并且/或者你构建的通常是只有一些动态行为的小项目，那么 Livewire 是很棒的。但是，你在一家需要在某些技术堆栈上下赌注的大公司工作，他们很可能会选择 React/Vue 作为前端代码的基础。

Taylor & 社区: 为什么不两者兼得呢？

最后，让我们看一下其他人有什么要说的。

作为一名『公正的专家』观点，让我们来谈谈 Laravel Jetstream 与 Laravel 8 一起发布的初学者工具包。Taylor Otwell 想为现代 Web 提供一个全新的基于 Auth-powered 样板，而对于动态元素，他必须在 Livewire 和 Inertia 之间做出选择。

让我们听听 Taylor 对这个选择说了些什么: 『Livewire 和 Inertia 我都喜欢。在构建 Jetstream 时，我很难选择用哪一个，所以我决定把它们都包括进来。我觉得风险很大是因为我需要去维护两套前端，但是我觉得这两个项目都是由 Laravel 社区成员完成的伟大项目。』

而且，即使我在我的 Twitter 上进行民意调查获得了 1,854 票，Livewire 和 Inertia 获得了差不多比例的选择：各 39%，21% 选择对于「两者，取决于项目」。

所以，「Livewire 还是 Inertia」这个问题的最终答案是，这是你个人的选择。大多数情况下，这取决于你使用 Vue/React 的经验。如果你完全没有经验，那么 Livewire 就是你的比较好的选择了。

laravel Livewire