Livewire 还是 Inertia.js?

Laravel

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


故事背景:Livewire/Inertia 解决了什么问题?

在过去几年中,单页应用程序 (SPA) 变得流行起来。你加载 JavaScript 和资产一次,然后页面上的所有链接都不会重新加载整个页面,而是仅重新加载某些部分。用户体验变得更好,但问题是他们需要花费大量时间才能正确创建。你需要照顾两个独立的部分:前端和后端,然后是它们之间的链接,包括路由、安全等。所以,在某些时候,一些开发人员想以某种方式简化它。这就是 LivewireInertia.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 就是你的比较好的选择了。

本文中的所有译文仅用于学习和交流目的,转载请务必注明文章译者、出处、和本文链接
我们的翻译工作遵照 CC 协议,如果我们的工作有侵犯到您的权益,请及时联系我们。

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

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

本文为协同翻译文章,如您发现瑕疵请点击「改进」按钮提交优化建议
《L05 电商实战》
从零开发一个电商项目,功能包括电商后台、商品 & SKU 管理、购物车、订单管理、支付宝支付、微信支付、订单退款流程、优惠券等
《L03 构架 API 服务器》
你将学到如 RESTFul 设计风格、PostMan 的使用、OAuth 流程,JWT 概念及使用 和 API 开发相关的进阶知识。
讨论数量: 4

这个确实是个好东西

2个月前 评论

哪个都不用,框架直接给你绑定了,不符合国情,建议前后端分离。前端 uniapp vite 啥的让前端搞去,别往后端揽活

2个月前 评论
mengdodo 1个月前

我有用Livewire 写一个学生信息填写的h5,感觉,如果纯 wire:model 性能确实不好,有些人的网络不好的时候更糟糕。
延时的时候,很诡异的是你填写了的信息,过一会会变。。。
优点和缺点并存

1个月前 评论

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!