渥太华微生活

最近，从 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 就是你的比较好的选择了。

原文地址：https://laravel-news.com/livewire-inertia

译文地址：https://learnku.com/laravel/t/67579