Inertia.js：项目简介与入门教程

2024-05-31 渥太华微生活

构建一个 web 程序是一个复杂的过程，在选择众多框架之前，你必须得考虑它是传统的服务器端渲染应用程序 (SSR) 还是单页应用程序 (SPA)。

尽管服务器端和客户端渲染都有其优缺点，但 Inertia 融合了两者的优点。

Inertia.js 是什么？

Inertia 是一个结合了服务器端渲染（SSR）和单页应用（CSR）两者优点的库，它允许开发者使用服务器端的路由和控制器构建 SPA 应用。

根据其官方文档：

Inertia 是构建传统服务端渲染的 Web 应用程序的新方法。使用 Inertia，可以在您不精通现代 SPA 应用复杂技术的情况下，创建完全由客户端渲染的单页应用，它通过利用现有的服务器端框架来做到这一点。

有人可能会问这是另一个 JavaScript 框架吗？官方文档上这么写：

Inertia 不是一个框架，也不是您现有的服务器端或客户端框架的替代品。相反，它旨在与他们合作，可以将 Inertia 视为连接两者的胶水。

Inertia.js 解决的问题

Inertia 解决了开发人员在构建现代应用程序时面临的许多问题。问题如：

SPA 复杂性 - 建立现代 SPA 是一件繁琐的事。开发人员需要花费大量时间处理应用状态、路由、导航保护、权限认证等等事项
* 构建 API * - 借助 Inertia.js，您无需构建 REST 或 GraphQL API，因为 Inertia 为传统的服务器端框架设计，如 Laravel，Ruby on Rails，或 Django
浏览器问题 - Inertia 有内置服务，可解决构建 SPA 时遇到的浏览器问题，例如：

浏览器历史记录管理和滚动条位置 - 提供 remember，preserveState 和 preserveScroll 属性以缓存本地组件状态
加载指示 - 由于 Inertia 请求是通过 AJAX 调用发出的，因此没有默认的浏览器加载进度条，因此 Inertia 包含 NProgress.js，一个进度条库。仅在请求时间超过 250m 时显示加载进度条
静态资源重载和版本控制 — Inertia 提供了一个选项来跟踪和存储您网站上静态资源的当前版本

为什么选择 Inertia.js?

不使用 GraphQL 同时具备 GraphQL 的优势

使用服务器端 ORM 作为数据源时，Inertia 拥有数据库上完整访问权限，以获取页面所需的数据。

Limited AJAX calls

在传统的 SPA 应用中，每次访问页面都会进行 AJAX 调用以获取数据。在 Inertia 中，会进行 AJAX 调用以启动应用程序，然后维护一个持久的 Vue.js 实例，随后的每个页面访问都是通过 XHR 进行的，XHR 会带有 X-Inertia 为 true 的 header。这将触发服务器以 JSON 形式发送 Inertia 响应，而不是进行整页访问。

它还创建了一个故障处理组件，该组件通过锚链接实现，它拦截了点击事件并防止了整个页面的重新加载。

安全

在构建基于 API 的应用程序时，我们必须在应用程序中添加 CORS 支持，以便能够访问其他来源的资源。

使用 Inertia，您无需担心设置 CORS，因为您的数据是通过控制器提供的，并且与 JavaScript 组件位于同一域中。

您可以在服务器端设置授权，并绕过令牌作为页面组件的道具来执行授权检查，这有助于降低暴露重要信息的风险，因为在客户端处理 [授权] [blog.logrocket.com/jwt-authenticat... /) 可能会使您面临 XSS 攻击的风险 (跨站点脚本)。

与框架无关

Inertia 与服务器端和客户端框架均无关。您可以将 Inertia 与任何支持动态组件的服务器端框架以及任何客户端框架一起使用。

Inertia adapters 是有助于使 Inertia 在特定框架上正常工作的服务 (软件包)，官方适配器支持目前后端仅限于 Rails, Laravel , 前端支持 React, Vue.js, Svelte

还有一些其他框架的非官方适配器，例如 Symfony, Django, CakePHP, 和 Adonis.

Inertia 有未来吗？

网络正在不断发展，我们已经看到了从传统的服务器端内置的整体应用程序向基于 API 的应用程序的过渡。在这种当前趋势下，Inertia 有未来吗？

当然，问题的答案取决于实际场景和用户的选择。

Inertia 是为希望构建整体应用程序的人而构建的 - 他们通常更喜欢控制器和视图之间的紧密结合，但又希望使用现代客户端框架来构建其应用程序。大多数开发人员仍属于此类别，但是 [基于 API 的应用的兴起和行业支持](code.tutsplus.com/articles/the-inc... development–net-22368)，我们可能会看到它的使用量减少。

当然，有时候使用 Inertia 可能不是最合适的选择。诸如您需要多客户支持，面向客户 / 营销页面以及 SEO 驱动的网站之类的情况。对这些使用 Inertia 可能不是一个好主意。但是，构建支持仪表板等功能的 Web 应用程序非常有用。

Inertia 是否可以进行服务器端渲染？

Inertia 当前不支持服务器端渲染，但是有一些工具可以预渲染 Inertia 网站，它们会生成并缓存网站特定路由的静态 HTML 版本，然后提供该内容。

在项目中使用 Inertia.js - 起步

先决条件

此安装过程在服务器端使用 Laravel，在客户端使用 Vue.js，在执行此部分之前，需要遵循以下条件：

Node.js 10x 或更高版本、 Yarn / npm 5.2 或更高版本
PHP >= 7.2.0, Composer 以及 Laravel
掌握 Vue 和 Laravel 基础

创建一个新的 Laravel 项目:

laravel new inertia-example

或通过 composer 创建:

composer create-project --prefer-dist laravel/laravel inertia-example

cd 进入项目目录:

$ cd inertia-example

使用 composer 安装 Inertia 的服务端适配器

composer require inertiajs/inertia-laravel

将 resources/views 目录下的 welcome.blade.php 文件重命名为 app.blade.php.

将您的 app.blade.php 的内容替换为：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
    <link href="{{ mix('/css/app.css') }}" rel="stylesheet" />
    <script src="{{ mix('/js/app.js') }}" defer></script>
  </head>
  <body>
    @inertia
  </body>
</html>

@inertia 指令创建一个基础的，一个 id 为 app 的 div，它告诉 Laravel 视图是使用 Inertia 生成的。

接下来，通过在终端中运行以下命令来设置客户端程序：

npm install @inertiajs/inertia @inertiajs/inertia-vue

#或者，使用 Yarn

yarn add @inertiajs/inertia @inertiajs/inertia-vue

在 resources / js 中找到的 app.js 文件，并用以下内容替换 app.js 文件的内容

import { InertiaApp } from '@inertiajs/inertia-vue'
import Vue from 'vue'

Vue.use(InertiaApp)

const app = document.getElementById('app')

new Vue({
  render: h => h(InertiaApp, {
    props: {
      initialPage: JSON.parse(app.dataset.page),
      resolveComponent: name => require(`./Pages/${name}`).default,
    },
  }),
}).$mount(app)

resolveComponent 回调告诉 Inertia 如何加载页面组件。它接收一个字符串作为页面名称，并返回一个页面实例。

动态导入

为了启用代码拆分，我们使用 babel 插件进行动态导入。

首先，通过运行以下命令进行安装：

npm install @babel/plugin-syntax-dynamic-import
#或使用 Yarn
yarn add install @babel/plugin-syntax-dynamic-import

接下来，使用以下命令在项目根目录中创建一个.babelrc 文件：

{
  "plugins": ["@babel/plugin-syntax-dynamic-import"]
}

最后，在应用初始化中更新 resolveComponent 回调，以使用 import 而不是 require。回调返回一个包含组件实例的 promise，如下所示：

......

new Vue({
  render: h => h(InertiaApp, {
    props: {
      initialPage: JSON.parse(app.dataset.page),
      resolveComponent: name => import(`./Pages/${name}`).then(module => module.default),
    },
  }),
}).$mount(app)

结论

Inertia 是用于构建 “混合” SPA 的出色的库。在本文中，我们研究了它在不久的将来的可行性，它的优势以及如何在 Laravel 和 Vue 项目中使用它。

原文地址：https://reinink.ca/articles/introducing-inertia-js

译文地址：https://learnku.com/laravel/t/41051

编者注：新闻取自各大新闻媒体，新闻内容并不代表本网立场！文字和图片来自网络，版权归原作者所有。如有侵权，请速联系小编，立即删除。

263

151