页面渲染差异 Inertia vs. Vue with Laravel Backend答案

【问题标题】：Page redering diffrence Inertia vs. Vue with Laravel Backend页面渲染差异 Inertia vs. Vue with Laravel Backend
【发布时间】：2021-06-20 08:24:40
【问题描述】：

我以两种方式实现了一个简单的 crud 应用程序。一种使用 Laravel 和 Vue，另一种使用 Laravel、Vue 和 Inertia。

在我的 Vue/Laravel 应用程序中渲染一个简单的用户列表时（使用路由或初始页面加载），Vue 会立即渲染整个页面，并在从服务器接收到用户列表后立即加载。 -> 良好的用户体验，可以实现加载指示

在我的惯性应用程序中渲染相同的东西时，Vue 在从服务器接收到数据后渲染整个页面。这对于具有大量数据的应用程序来说是一件非常糟糕的事情。

即使在我非常小/超薄的应用程序中，我也感受到了差异，并在我的 UserController 中返回视图（或 Inertia::render）之前通过简单的 sleep(3) 解决了这一问题。

这是正常的吗/有没有办法防止这种情况发生？或者我可能没有很好地实现惯性？

我正在使用惯性.js 0.8.5、惯性-vue 0.5.5 和 Vue 2.6.12

【问题讨论】：

标签： laravel vue.js inertiajs

【解决方案1】：

通常，如果您想使用 Inertia 显示用户列表，您会使用 Laravel 的内置分页对列表服务器端进行分页。如果页面加载时间很慢，您可能是在尝试加载太多数据/缺少急切加载/缺少数据库索引/进行一些可以优化的计算。
在 Inertia 视图之间导航时，您可以使用 Progress Indicator 来改善用户体验。如果他们在数据加载之前看到带有 ajax 调用的 SPA 中的空表与在视图重新加载之前看到进度条，这对用户有影响吗？ IMO 不是。
如果出于某种原因在特定视图中显示表格布局（或其他一些空数据容器）非常重要，即使它有一段时间是空的，您也可以使用 ajax 一次性加载数据案子。并非 Inertia 应用中的所有数据都需要从控制器“推送”到视图，您也可以从 Vue/React 端“拉取”它。

【讨论】：

我现在已经决定反对 Inertia。 Ofc，优化您的 db / API 等确实可以为大多数人解决这个问题。即使不需要获取用户，我也确实注意到了行为上的差异。对我来说，这是最终影响决策过程的一个因素。因为我觉得它需要一点 Vues 动力学。使用工具时，当我试图加快重复性任务时，显示任何 DOM 更改之前的那些短暂等待时间对我来说很烦人。
感谢您的更新 - 这完全取决于您喜欢使用哪种技术。我对 Laravel 更满意，所以对 Inertia 很满意。如果您习惯了传统的 SPA，那么也许您确实不需要 Inertia。话虽如此，如果我回答了您的问题，并且您不需要其他人写答案，请标记单击我的答案旁边的“打勾”以接受它，并将问题标记为已解决。