Inertia 2.0 发布总结

主要观点

Inertia 团队近期发布了 Inertia 2.0，引入了多项新特性，包括异步请求、延迟属性、预取和轮询等。这些功能显著提升了单页应用程序的交互性、响应速度和性能。

关键特性

1. 异步请求：

   • 支持并发操作和懒加载。
   • 实现无限滚动、预取和轮询等功能。

2. 预取：

   • 在用户请求前在后台获取数据，提升应用感知性能。
   • 默认在用户悬停链接超过75ms时预取数据，数据缓存30秒。
   • 可通过 cacheFor 属性自定义缓存时间。
   • 支持在 mousedown 或组件挂载时预取。

3. 懒加载：

   • 使用 WhenVisible 组件实现滚动懒加载，基于 Intersection Observer API。
   • 支持显示加载中的回退信息。

4. 其他特性：

   • 轮询、延迟属性和无限滚动。

升级指南

• 安装客户端适配器（如 Vue、React、Svelte）：

  npm install @inertiajs/vue3@^2.0

• 升级 inertiajs/inertia-laravel 包：

  composer require inertiajs/inertia-laravel:^2.0

Inertia 工作原理

• 首次页面加载返回完整 HTML 响应。
• 后续请求返回包含 JavaScript 组件（名称和属性）的 JSON 响应。
• 客户端 Inertia 替换当前页面并更新历史状态。

HTTP 头

• 使用 X-Inertia 头区分全页刷新和部分刷新。
• 如果 X-Inertia 未设置或为 false，表示标准全页访问。

开源与贡献

• Inertia 是 MIT 许可下的开源软件。
• 欢迎反馈和贡献，需遵循 贡献指南。

文档链接

• 懒加载配置选项
• 预取配置选项
• 升级指南
• 协议