最近，我经常从 Laravel 开发人员那里听到这样的问题：“我应该学习/使用 Livewire 还是 Inertia.js？”当然，答案因人而异，但让我们尝试比较它们，并为你的决定提供更多背景信息。
背景：Livewire/Inertia 解决什么问题？
在过去几年中，单页应用程序 (SPA) 越来越受欢迎。你只需要加载一次 JavaScript 和资产，然后页面上的所有链接都不会重新加载整个页面，而是只重新加载某些部分。用户体验得到了改善，但问题是创建适当的 SPA 需要花费很多时间。你需要处理两个独立的部分：前端和后端，以及它们之间的链接，包括路由、安全等等。因此，在某个时刻，一些开发人员开始思考如何简化这一过程。这就是 Livewire 和 Inertia.js 诞生的背景，它们大约是在同一时间出现的，并且都变得非常受欢迎。
Livewire 和 Inertia 的目标非常相似：简化 SPA 的创建。但是，它们实现的方式不同。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 的批评类似：经验不足的开发人员往往会忽略性能问题，因为“它能正常工作”，结果代码中可能存在数百个未优化的 SQL 查询，这些查询在 Eloquent 的幕后执行。
此外，Laravel 请求和结果的有效负载也更大：Livewire 会下载块或组件的完整 HTML，而 Inertia 则使用 JSON 作为结果。
因此，在性能方面，Inertia 的默认行为可能更好。但是，在大多数情况下，你的用户不会察觉到视觉上的差异，尤其是在较小的项目中。此外，使用 Livewire，你可以优化很多内容来提高性能。
SEO：Livewire 更好。理论上。
坦白地说，我不认为你应该依赖单页应用程序的 SEO。如果你的页面非常动态，并且包含很多可移动的部分，那么它更像是一个应用程序，而不是一个网站。事实上，它们甚至被称为“单页应用程序”。根据我的经验，SPA 主要用于管理数据，通常受身份验证机制保护，因此用户点击页面是为了执行操作，而不是为了获取可抓取的网站。
也就是说，可能存在一个项目需要同时实现动态行为和 SEO 效果。为此，最好使用服务器端渲染，这样搜索引擎更容易抓取。
Livewire 默认情况下使用服务器端渲染，并下载完整的 HTML，这些 HTML 可供 Google 和其他抓取工具读取。因此，我在性能方面提到的缺点在 SEO 方面变成了优势。
Inertia 默认情况下使用客户端渲染：因此每次服务器调用都会返回 JSON，这些 JSON 会在浏览器中“神奇地”解析。因此，搜索引擎难以正确读取该页面内容。也就是说，在 2022 年 1 月，Inertia 推出了服务器端渲染功能。但是，设置它可能需要额外的努力：它将请求传递给一个单独的 Node.js 服务，以便它可以渲染页面并在完成渲染后将渲染后的 HTML 返回到浏览器。
所有关于 SEO 的想法几乎都是理论上的。你无法提前知道特定的搜索引擎会如何抓取和读取你的网站内容。有人说 Google 已经越来越擅长读取 JavaScript 驱动的动态网站，但每个情况都很特殊。
职业机会：每个人都需要全栈开发人员
看起来，如果你是一位具有少量前端经验的 Laravel 开发人员，你可以直接开始使用 Livewire 并创建出色的项目。这是真的，但这会限制你未来的工作机会。
如果你尝试在求职网站或自由职业平台上搜索与 Livewire 相关的职位，你会发现几乎没有。主要是因为 Livewire 被认为是 Laravel 之上的一个小工具，其用例非常有限。
然而，Inertia 基于像 Vue 或 React 这样的流行 JavaScript 框架。你也不会发现很多职位特别提及 Inertia，但你将被迫跳出 Laravel 的舒适区进入一个全栈的世界，这反过来会为你打开一片机会之海：如今，每家公司都想要雇佣全栈开发者。
因此，从这个角度来看，Livewire 非常适合你是独行侠自由职业者，对自己的技术决策负全部责任，以及你通常构建的只有少量动态行为的小型项目。但是，如果你在一个需要在某个技术栈上押注的大公司工作，他们很可能选择 React/Vue 作为前端代码的基础。
Taylor 和社区：为什么不两者兼得呢？
最后，让我们看看其他人的看法。
作为“公正专家”的观点，让我们谈谈与 Laravel 8 一起发布的 Laravel Jetstream 启动套件。Taylor Otwell 希望为现代网络提供一种新的基于身份验证的样板，对于动态元素，他必须在 Livewire 和 Inertia 之间做出选择。
让我们听听 Taylor 对选择的说法：“我喜欢 Livewire 和 Inertia。在构建 Jetstream 的过程中，我非常纠结选择哪个，所以就决定将两者都包含进来。这感觉风险很大，因为我不得不维护两套前端，但我认为这两个项目都非常棒，由 Laravel 社区成员开发。”
而且，即使我在 我的推特上进行了一个投票，有 1,854 人投票，Livewire 和 Inertia 赢得了相同的受众：各占 39%，21% 选择了“两者，取决于项目”。
因此，对于“Livewire 还是 Inertia”这个问题，最终的答案是你的个人选择。主要取决于你对 Vue/React 的经验。如果你没有或只有很少的经验，那么 Livewire 就是你的朋友。
