Inertia.js
Inertia是為開發(fā)團(tuán)隊(duì)和獨(dú)立開發(fā)者設(shè)計(jì)的，這些人員通常使用Laravel，Ruby on Rails或Django等框架構(gòu)建服務(wù)器端渲染的應(yīng)用程序。他們一般通過創(chuàng)建控制器，從數(shù)據(jù)庫中獲取數(shù)據(jù)，然后數(shù)據(jù)傳遞給模板，然后呈現(xiàn)視圖。
使用 Inertia，您可以像使用所選的服務(wù)器端 Web 框架一樣構(gòu)建應(yīng)用程序。您可以使用框架的現(xiàn)有功能進(jìn)行路由、控制器、中間件、身份驗(yàn)證、授權(quán)、數(shù)據(jù)獲取等。
但是，Inertia 會(huì)替換應(yīng)用程序的視圖層。應(yīng)用程序返回的視圖不是通過 blade 模板使用服務(wù)器端呈現(xiàn)，而是 JavaScript 頁面組件。這允許您使用 React、Vue 或 Svelte 構(gòu)建整個(gè)前端，同時(shí)仍然享受 Laravel 或其它語言服務(wù)器端框架的功能。
正如您所料，簡單地在 JavaScript 中創(chuàng)建前端并不能為您提供單頁應(yīng)用程序體驗(yàn)。如果單擊鏈接，瀏覽器將進(jìn)行整頁訪問，這將導(dǎo)致客戶端框架在后續(xù)頁面加載時(shí)重新啟動(dòng)。這就是慣性改變一切的地方。
工作原理
Inertia 的核心本質(zhì)上是一個(gè)客戶端路由庫。它允許您在不強(qiáng)制重新加載整個(gè)頁面的情況下進(jìn)行頁面訪問。這是使用組件完成的，組件是圍繞普通錨鏈接的輕量級(jí)包裝器。當(dāng)您單擊“Inertia ”鏈接時(shí)，“Inertia ”會(huì)攔截該單擊，并改為通過 XHR 進(jìn)行訪問。您甚至可以使用 在 JavaScript 中以編程方式進(jìn)行這些訪問。
當(dāng) Inertia 進(jìn)行 XHR 訪問時(shí)，服務(wù)器檢測到它是 Inertia 訪問并返回，而不是返回完整的 HTML 響應(yīng)，而是返回包含 JavaScript 頁面組件名稱和數(shù)據(jù) （props） 的 JSON 響應(yīng)。然后，Inertia 將前一頁組件動(dòng)態(tài)交換為新頁面組件，并更新瀏覽器的歷史記錄狀態(tài)。
代碼示例
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>
總結(jié)
Inertia 允許您構(gòu)建一個(gè)完全基于 JavaScript 的單頁應(yīng)用程序，而不會(huì)增加任何復(fù)雜性。
Inertia 的工作方式更像是經(jīng)典的服務(wù)器端渲染應(yīng)用程序。您創(chuàng)建控制器，從數(shù)據(jù)庫中獲取數(shù)據(jù)，然后渲染視圖。但是，Inertia 視圖是用 React、Vue 或 Svelte 編寫的 JavaScript 頁面組件。
簡單來說，就是本來我們需要通過自己手寫fetch，ajax等進(jìn)行數(shù)據(jù)交互的方式被封裝起來，在后臺(tái)方面，我們只需要像平常寫模板賦值處理就行，只不過調(diào)用的是Insertia::render方法，而前端處理幾乎不變。
