Inertia.js 中延迟加载状态卡住问题分析与解决方案

问题现象

在使用Inertia.js框架的Vue3和React适配器时，开发者遇到了一个关于延迟加载(deferred loading)的异常行为。当用户点击当前页面的链接或提交表单后重定向回当前页面时，延迟加载的props会一直显示加载状态而无法正常显示数据内容。

技术背景

Inertia.js是一个用于构建单页应用(SPA)的框架，它允许开发者使用传统后端渲染方式构建现代前端应用。延迟加载是Inertia.js提供的一项优化功能，允许某些props在页面初始渲染后异步加载，从而提升首屏性能。

问题复现条件

1. 后端控制器使用Inertia::defer方法包装需要延迟加载的数据
2. 前端使用<Deferred>组件包裹延迟加载的内容
3. 用户在当前页面点击指向自身的链接或提交表单后重定向回当前页面

问题分析

这个问题的核心在于Inertia.js的路由处理机制与延迟加载状态的同步问题。当用户触发当前页面的重新加载时：

1. 页面状态被重置，但延迟加载的状态管理没有正确初始化
2. 框架可能错误地认为数据已经在加载中，因此不再触发新的加载请求
3. 导致UI永远停留在加载状态

临时解决方案

目前开发者发现可以通过以下方式临时解决这个问题：

1. 对于链接点击问题，可以添加only属性指定需要保留的props
2. 对于表单提交问题，可以在表单提交时明确指定only参数

// 表单提交示例
this.$inertia.post('/submit', data, {
  only: ['groups'] // 明确指定需要保留的props
})

框架版本说明

这个问题出现在@inertiajs/vue3的2.0.0-beta.1版本中。需要注意的是，由于该版本仍处于测试阶段，此类问题在正式发布前可能会被修复。

最佳实践建议

1. 对于关键数据，考虑不使用延迟加载，确保核心内容可靠展示
2. 如果必须使用延迟加载，确保为可能的重定向场景添加适当的错误处理和状态重置
3. 关注框架更新，这个问题可能会在后续版本中得到官方修复

总结

Inertia.js的延迟加载功能虽然能提升性能，但在特定场景下会出现状态管理问题。开发者在使用时需要了解这一限制，并采取适当的应对措施。随着框架的成熟，这个问题有望得到根本解决。