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>