Inertia.js
Inertia是为开发团队和独立开发者设计的，这些人员通常使用Laravel，Ruby on Rails或Django等框架构建服务器端渲染的应用程序。他们一般通过创建控制器，从数据库中获取数据，然后数据传递给模板，然后呈现视图。
image.png
使用 Inertia，您可以像使用所选的服务器端 Web 框架一样构建应用程序。您可以使用框架的现有功能进行路由、控制器、中间件、身份验证、授权、数据获取等。
但是，Inertia 会替换应用程序的视图层。应用程序返回的视图不是通过 blade 模板使用服务器端呈现，而是 JavaScript 页面组件。这允许您使用 React、Vue 或 Svelte 构建整个前端，同时仍然享受 Laravel 或其它语言服务器端框架的功能。
正如您所料，简单地在 JavaScript 中创建前端并不能为您提供单页应用程序体验。如果单击链接，浏览器将进行整页访问，这将导致客户端框架在后续页面加载时重新启动。这就是惯性改变一切的地方。
工作原理
Inertia 的核心本质上是一个客户端路由库。它允许您在不强制重新加载整个页面的情况下进行页面访问。这是使用组件完成的，组件是围绕普通锚链接的轻量级包装器。当您单击“Inertia ”链接时，“Inertia ”会拦截该单击，并改为通过 XHR 进行访问。您甚至可以使用 在 JavaScript 中以编程方式进行这些访问。
当 Inertia 进行 XHR 访问时，服务器检测到它是 Inertia 访问并返回，而不是返回完整的 HTML 响应，而是返回包含 JavaScript 页面组件名称和数据 （props） 的 JSON 响应。然后，Inertia 将前一页组件动态交换为新页面组件，并更新浏览器的历史记录状态。
代码示例
class UsersController
{
public function index()
{
$users = User::active()
->orderByName()
->get(['id', 'name', 'email']);
return Inertia::render('Users', [
'users' => $users
]);
}
}
<script setup>
import Layout from './Layout'
import { Link, Head } from '@inertiajs/vue3'
defineProps({ users: Array })
</script>
<template>
<Layout>
<Head title="Users" />
<div v-for="user in users" :key="user.id">
<Link :href="`/users/${user.id}`">
{{ user.name }}
</Link>
<div>{{ user.email }}</div>
</div>
</Layout>
</template>
总结
Inertia 允许您构建一个完全基于 JavaScript 的单页应用程序，而不会增加任何复杂性。
Inertia 的工作方式更像是经典的服务器端渲染应用程序。您创建控制器，从数据库中获取数据，然后渲染视图。但是，Inertia 视图是用 React、Vue 或 Svelte 编写的 JavaScript 页面组件。
简单来说，就是本来我们需要通过自己手写fetch，ajax等进行数据交互的方式被封装起来，在后台方面，我们只需要像平常写模板赋值处理就行，只不过调用的是Insertia::render方法，而前端处理几乎不变。
网友评论