ラーフル?チョッデ著??

最新のフロントエンド フレームワークは、React と Next.js、Vue と Nuxt.js、Svelte と SvelteKit など、専用のフルスタック フレームワークとうまく組み合わせられます。しかし、React のような最新のフロントエンド ソリューションと、Laravel のような従來のバックエンドまたはサーバー側(cè)のフレームワークを組み合わせる場(chǎng)合、同じ使いやすさとすぐに使えるサポートを?qū)g現(xiàn)することは不可能に思えます。

JavaScript フロントエンド ソリューションと従來のバックエンド フレームワークの間の適応性のギャップは、Inertia.js によって埋められます。この導(dǎo)入ガイドでは、Inertia を使用して、サーバー側(cè)のルーティングを維持しながら、従來のバックエンド フレームワークと最新の JavaScript フロントエンドを備えたシングルページ アプリ (SPA) を構(gòu)築する方法を?qū)Wびます。

Inertia.js とは何ですか?

Inertia.js は、開発者が間に API を必要とせずに、一般的なフロントエンド フレームワークとバックエンド フレームワークを使用して最新の SPA を構(gòu)築できるツールです。 2019 年に Jonathan Reinink によって作成された Inertia の背後にある主なアイデアは、既存のサーバー側(cè)フレームワークを活用しながら最新の SPA を構(gòu)築するプロセスを簡素化することでした。

簡単に言うと、Inertia はサーバー側(cè)とクライアント側(cè)のフレームワークを結(jié)合する接著剤として機(jī)能し、バックエンドとフロントエンド間の効率的な通信を確保します。 Inertia を使用すると、フロントエンドとバックエンド、またはサーバー側(cè)の 2 つの異なるコードベースを維持するのではなく、アプリ全體をモノリスのような 1 つのコードベースで開発します。

Inertia.js は時(shí)間の経過とともにどのように変化しましたか?

當(dāng)初、Inertia は Vue と Laravel のみをサポートしていました。その後のリリースでは、より多くのフレームワークのサポートが進(jìn)化し、拡張されました。

最新の Inertia モノリスは、サーバーサイド レンダリング (SSR)、自動(dòng)アセット バージョニング、ページ コンポーネントの遅延読み込み、TypeScript サポートなどの重要な機(jī)能を提供します。後でフレームワークの統(tǒng)合について説明しながら、そのフレームワークのサポートについて調(diào)べます。

Inertia.js の仕組み

慣性は、フロントエンドとバックエンドの間のアダプターのように機(jī)能します。通常の SPA とは次の點(diǎn)で異なります:

• SPA のようなエクスペリエンスを提供しながら、サーバー側(cè)のルーティングを維持します
• ページ全體のリロードを小規(guī)模なフェッチ リクエストに置き換えます
• サーバーから JSON データを返して受信します
• 水分補(bǔ)給に必要な JavaScript が少なくなります

Inertia を利用したアプリを使用してブラウザからリクエストが行われると、リクエストは最初にバックエンドに到達(dá)します。その結(jié)果、Inertia 応答が作成され、最初に Inertia JavaScript ライブラリを含む完全な HTML ドキュメントが Inertia クライアントを通じてブラウザーに返されます。

後続のナビゲーションでは、Inertia クライアントはフェッチ リクエストを作成し、サーバーから JSON データを返します。この受信したデータを使用して、クライアントはフロントエンドを更新し、ページ全體をリロードしなくても変更がアプリに反映されます。

これは、プロセス全體を視覚的に説明したフローチャートです:

さらに読む:

• Inertia.js の概要

Inertia.js を選ぶ理由?

SPA に従來のバックエンド フレームワークを使用する必要があるが、フロントエンドを自由に処理できる狀況にある場(chǎng)合は、Inertia または同様のツールの使用を検討する必要があります。

Inertia は Laravel 向けにカスタマイズされており、Laravel プロジェクトでの安定性が向上します。あなたが Laravel 開発者で、Blade テンプレートがデフォルトで提供する以上のものを?qū)g行したい場(chǎng)合は、Inertia を試してみるとよいでしょう。

Inertia があなたの友人になる可能性のあるいくつかの使用例をさらに検討してみるとよいでしょう。次の 2 つのセクションでは、Inertia を使用することの長所と短所について説明します。これは、アプリ開発で Inertia を選択する際に十分な情報(bào)に基づいた決定を下すのに役立ちます。

Inertia.js の短所

一般に SPA には既知の欠點(diǎn)がいくつかありますが、ここでは説明しません。代わりに、開発ユーティリティとしての Inertia の欠點(diǎn)について觸れます。

柔軟性が低い

Inertia を使用すると、アプリのフロントエンドとバックエンドを単一のコードベースで管理できます。この密結(jié)合により、Inertia は、保守性の向上、懸念事項(xiàng)の分離、スケーラビリティ、獨(dú)立した開発、技術(shù)スタックの柔軟性などの理由から、フロントエンドとバックエンドを別々に保守する必要があるプロジェクトには適していません。

開発者の経験

Inertia のようなツールを使用すると、探索して學(xué)習(xí)するためのユーティリティがスタックに 1 つ追加されます。 Inertia 固有のパターンと規(guī)則を理解するには中程度の學(xué)習(xí)曲線が必要ですが、少し面倒で時(shí)間がかかる場(chǎng)合があります。

フロントエンドとバックエンドで Inertia のようなツールに適応することはまだ主流ではないため、これらのツールを使用して作業(yè)を行うための標(biāo)準(zhǔn)的な方法はありません。したがって、Inertia から切り替えるには、特にフロントエンドで大幅なリファクタリングが必要になります。

また、フロントエンドとバックエンドの境界がモノリス內(nèi)で一致するため、特に API と単體テストのテストの複雑さは確実に増加します。

小さなコミュニティ

Inertia には GitHub 上に 6,000 を超えるスターがあり、85 人を超える寄稿者がいます。その Laravel アダプターには 2,000 を超える星が付いています。これらすべての統(tǒng)計(jì)を合計(jì)すると、Inertia ほど多くの機(jī)能やフレームワークのサポートを提供しない同じカテゴリのツールよりもはるかに低くなります。

そのため、それを使用して何か特定のものを構(gòu)築したいのに、従うべき十分な參考文獻(xiàn)やガイドが見つからないという狀況が発生する可能性があります。

Inertia.js と Livewire などの競(jìng)合製品との正面比較については、以下の表を參照してください。

さらに読む:

• Livewire と Inertia.js: Laravel フロントエンドの比較

技術(shù)的な考慮事項(xiàng)

Inertia では、適切なキャッシュ戦略を確立するのが簡単ではないため、最初にアプリをオフラインにする作業(yè)が複雑になる可能性があります。また、デフォルトでは、Inertia はリクエストごとにページ全體のコンポーネントを送信し、ペイロード サイズが増加しますが、これは部分的なリロードで解決できることにも留意してください。

Inertia.js の長所

Inertia には、従來のクライアント側(cè)でレンダリングされる SPA に比べて、一般的な利點(diǎn)がいくつかあります。その主な強(qiáng)みを 1 つずつ説明しましょう。

シームレスな統(tǒng)合

Inertia は、一般的なフロントエンドおよびバックエンド フレームワークと完璧に統(tǒng)合し、デモ ビルドで Vue を直接サポートします。フロントエンドとバックエンドの両方を組み合わせたサポートされるフレームワークとライブラリには、Laravel、Rails、Phoenix、Django、React、Vue、Svelte が含まれます。

Laravel を使用すると、Vite でアセットを構(gòu)築できるため、Webpack ベースの Laravel Mix よりもはるかに高速で生産的な開発エクスペリエンスが得られます。 Vite ベースのアセット バンドルは、JavaScript ベースのフロントエンドを?qū)g裝することが目標(biāo)である場(chǎng)合に最適です。

さらに読む:

• Inertia.js、Vue.js、AdonisJs の入門
• Laravel と Vue を使用したシングルページ アプリの作成

開発の簡素化

上で説明したように、開発者のエクスペリエンスはやや劣るものの、Inertia は統(tǒng)合を簡素化し、フロントエンドとバックエンドを連攜させるための別個(gè)の API の必要性を排除します。 Inertia を使用すると、スターター キットを使用できるようになり、開発用にクライアント側(cè)とサーバー側(cè)の両方の環(huán)境をセットアップするための手動(dòng)インストール ガイドが提供されます。

パフォーマンス

Inertia アプリは、巨大な JavaScript バンドルを含む完全にサーバーでレンダリングされた HTML をクライアントに送信する代わりに、クライアント上で比較的高速にレンダリングする初期 JSON データを含む最小限の HTML シェルを受け取ります。

これにより、Inertia ベースのアプリは、通常のクライアント側(cè)でレンダリングされる SPA よりも複雑さを増すことなく、初期パフォーマンスがわずかに向上します。また、全體的な UX の品質(zhì)が向上し、重要なコア Web Vital 指標(biāo)である First Contentful Paint も改善されます。

さらに読む:

• SPA 向けのコア Web Vitals のベスト プラクティス

SEO に優(yōu)しい

慣性ベースのアプリはサーバー側(cè)のルーティングを使用するため、URL がより整理され、簡単にクロール可能になります。これにより、各ページのメタデータの処理が非常に簡単になります。また、最後のポイントで説明したように、これらのアプリは、クライアントに送信される初期データの量が少ないため、FCP スコアが高くなる可能性があります。

これらの両方の機(jī)能を組み合わせると、SEO が向上し、Inertia.js アプリに従來の SPA よりも優(yōu)れた優(yōu)位性が與えられます。

ヒント: クライアント側(cè)レンダリング (CSR) が FCP メトリクスに悪影響を及ぼしている場(chǎng)合は、Inertia.js の SSR プラグインを使用して完全にサーバーでレンダリングされるアプリを選択すると、スコアが向上します。

バンドルサイズ

Inertia.js はフロントエンドとバックエンドの間のアダプターとして機(jī)能するため、(當(dāng)然のことながら) 非常にコンパクトで、圧縮および gzip 圧縮された重さはわずか約 15kB です。

ドキュメント

Inertia のドキュメントを參照すると、特に Laravel をバックエンド フレームワークとして使用する場(chǎng)合にすぐに使い始めることができます。また、レガシー バージョンのアップグレード ガイドもあり、一般的な概念から高度な概念までを 1 か所でカバーしています。

Inertia.js を使ってみる

最も人気のある 2 つのフロントエンドおよびバックエンド ソリューション、つまり React ベースのフロントエンドを備えた Laravel ベースのバックエンドを使用して Inertia をセットアップする方法を?qū)Wびましょう。このチュートリアルで説明されているすべてのコードは、この GitHub リポジトリにあります。

簡単にするために、この設(shè)定には TypeScript の使用が含まれていないことに注意してください。

サーバー側(cè)のインストール

マシンに Laravel がインストールされていると仮定して、Laravel インストーラー コマンドを使用して新しい Laravel プロジェクトを作成しましょう。

laravel new

開発者ターミナルに次のようなものが表示されるはずです:

ターミナルでコマンドを?qū)g行し、プロジェクトの名前を指定すると、インストーラーは開始キットとテスト フレームワークを選択し、Git リポジトリを初期化し、その他のセットアップ手順を?qū)g行するように求めます。

Breeze や Jetstream などのスターター キットには、既製の Inertia.js ベースの足場(chǎng)とデモ アプリが含まれていますが、私たちはそれを望んでいません。代わりに、最初からセットアップします。

さらに読む:

• Laravel Breeze の Inertia-React スタックと Next.js および Gatsby の比較
• Laravel と AdonisJs: どちらを使用するべきですか?

インストール手順が終わるまでに、データベースを選択するように求められます。この記事の説明には PostgreSQL を使用しているため、pgsql を選択しました。データベースの好みに応じて選択してください。

次に、ターミナルで次の Composer コマンドを?qū)g行して、Laravel の Inertia.js 統(tǒng)合をインストールする必要があります。

composer require inertiajs/inertia-laravel

上記のコマンドは、Inertia 用の Laravel アダプターとその依存関係をインストールします。また、Laravel と Inertia が連攜するための基礎(chǔ)も整います。

その後、Laravel で Inertia リクエストを処理するために Inertia ミドルウェアを追加しましょう。これを行うには、次の職人コマンドを使用します:

laravel new

クライアント側(cè)のインストール

Laravel のデフォルトの Blade テンプレートの代わりに、React を使用してページとコンポーネントを処理します。プロジェクト フォルダーに cd で移動(dòng)し、次のコマンドを使用して React と React DOM をインストールしましょう。これを行うには、選択した Node パッケージ マネージャーを使用します。

composer require inertiajs/inertia-laravel

プロジェクト全體を通じて Vite をアセット マネージャーとして使用するため、Vite の React プラグインも開発依存関係としてインストールしましょう。

php artisan inertia:middleware

最後に、以下のコマンドを使用して React の Inertia サポートを追加します。

pnpm add react react-dom

この設(shè)定では Tailwind CSS も使用していますが、これは完全にオプションです。 Tailwind CSS もインストールしたい場(chǎng)合は、React または Vue アプリで Tailwind CSS をインストールする場(chǎng)合と同じ手順を?qū)g行します。

構(gòu)成

まず、resources/js ディレクトリで app.js ファイルを見つけ、その名前を app.jsx に変更し、その內(nèi)容を次のものに置き換えます。

pnpm add --save-dev @vitejs/plugin-react

上記の変更は、Inertia がページを識(shí)別し、正しいルートにリンクするのに役立ちます。

次に、resources/view ディレクトリにある welcome.blade.php ファイルの名前を app.blade.php に変更し、その內(nèi)容を次のように置き換えます。

pnpm add @inertiajs/react

Web ページの基本的な HTML 構(gòu)造內(nèi)に、このファイルには、リロードの実行やスクリプトの追加などのために特定のスクリプトを挿入するために必要な Inertia ディレクティブと Vite ディレクティブが含まれていることに注意してください。

次に、Inertia 固有のリクエストを処理するために必要なミドルウェアを bootstrap/app.php ファイルに追加します。

import { createInertiaApp } from "@inertiajs/react";
import { createRoot } from "react-dom/client";
import "../css/app.css";

createInertiaApp({
  resolve: (name) => {
    const pages = import.meta.glob("./Pages/**/*.jsx", { eager: true });
    return pages[`./Pages/${name}.jsx`];
  },
  setup({ el, App, props }) {
    createRoot(el).render(<App {...props} />);
  },
});

Vite が提供するメリットを享受するために、React プラグインを Vite と連攜するように設(shè)定しましょう。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  @viteReactRefresh
  @vite('resources/js/app.jsx')
  @inertiaHead
</head>
<body>
  @inertia
  <div id="app"></div>
</body>
</html>

最後に、次のコマンドを使用して Laravel と React の両方を?qū)g行しましょう:

<?php
use Illuminate\Foundation\Application;
use Illuminate\Foundation\Configuration\Exceptions;
use Illuminate\Foundation\Configuration\Middleware;
use App\Http\Middleware\HandleInertiaRequests;

return Application::configure(basePath: dirname(__DIR__))
  ->withRouting(
    web: __DIR__.'/../routes/web.php',
    commands: __DIR__.'/../routes/console.php',
    health: '/up',
  )
  ->withMiddleware(function (Middleware $middleware) {
    $middleware->web(append: [
        HandleInertiaRequests::class,
    ]);
  })
  ->withExceptions(function (Exceptions $exceptions) {
    //
  })->create();

これらのコマンドを 1 つのターミナル ウィンドウでまとめて実行するシェル スクリプトを作成できますが、作業(yè)をシンプルかつ簡単にするために、ここでは 2 つの別々のターミナルで実行しましょう。

これらのコマンドが正常に実行されると、2 つのローカル URL が表示されます。 Laravel を?qū)g行して、Laravel アプリがどのように表示されるかを確認(rèn)します。これで、Inertia を使用した基本アプリのセットアップが完了しました!

Inertia.js の主な機(jī)能

Inertia アプリを使用すると、さまざまなことができます。知っておくべき優(yōu)れた機(jī)能のいくつかを見てみましょう。

ページとレイアウト

さまざまなレイアウトやページをより適切に整理するには、resources/js ディレクトリに 2 つのサブディレクトリを作成します。ここでコンポーネントを別のディレクトリで管理し、必要に応じてページ內(nèi)で使用することもできます。

メイン レイアウトの簡単な例を次に示します。

import { defineConfig } from "vite";
import laravel from "laravel-vite-plugin";
import react from "@vitejs/plugin-react";

export default defineConfig({
  plugins: [
    laravel({
      input: "resources/js/app.jsx",
      refresh: true,
    }),
    react(),
  ],
  resolve: {
    alias: {
      "@": "/resources/js",
    },
  },
});

これは基本的にベース レイアウトとして機(jī)能するコンポーネントであるため、専用のレイアウト フォルダーに配置されます。次のコードに示すように、MainLayout をページのコンポーネントとして利用できるようになりました:

laravel new

MainLayout.jsx と About.jsx がどのように連攜して、Tailwind CSS が提供するスタイルを使用して作業(yè)ページを形成できるかを簡単に示します。

リンクとルーティング

従來の Laravel ルーティングでは、新しいルートを作成して、最後のセグメントで學(xué)習(xí)したページにフックするのが簡単です。ファイルベースではありませんが、ルーティングの管理は非常に簡単です。 Express や Fastify などの JavaScript ベースのバックエンド フレームワークを使用したことがある場(chǎng)合は、Laravel でのルーティングの仕組みにすでに慣れているでしょう。

routes/web.php ファイルに移動(dòng)し、新しいルートを追加し、以下のコードに示すように Inertia のレンダリング メソッドを使用して関連ページをレンダリングします。

composer require inertiajs/inertia-laravel

Inertia の動(dòng)的リンクは React や Next に似ており、以下に示すように Inertia の Link コンポーネントを使用して実行できます。

php artisan inertia:middleware

以下のスクリーン キャプチャは、上記のコード ブロックで作成したばかりのナビゲーションの SPA のような動(dòng)的動(dòng)作を示しています。

HTTP リクエスト (GET/POST/非 GET リクエスト)

Inertia は、狀態(tài)とフォームの送信を処理するための GET および POST リクエストを処理する useForm フックを提供します。また、 usePage フックも提供します。これを使用すると、成功または失敗のメッセージなど、サーバーからクライアントに渡される共有データにアクセスできます。

これは、ユーザー データをロードして送信するための GET リクエストと POST リクエストを作成する簡単な例です。 GET リクエストは Inertia によって暗黙的に処理されますが、useForm フックから post メソッドを使用して POST リクエストを作成してサーバーにデータを送信することに注意してください。

pnpm add react react-dom

このアプローチを使用すると、データベースからデータのリストを取得して HTML テーブルに表示するためのページを作成できます。また、以下に示すようにフォームを使用してこのデータをデータベースに追加することもできます。

進(jìn)行狀況インジケーター

Inertia.js は、NProgress ベースの進(jìn)行狀況表示を提供します。 App.jsx ファイルを確立するときにこれを有効にし、そこで進(jìn)行狀況インジケーターの構(gòu)成設(shè)定を指定できます。

pnpm add --save-dev @vitejs/plugin-react

NProgress の読み込みアニメーションがどのようなものかをよく知らない場(chǎng)合は、ここで少し覗いてみましょう:

データベースの統(tǒng)合

Laravel を定期的に使用している場(chǎng)合は、データベースを Inertia セットアップに統(tǒng)合して使用するのにそれほど時(shí)間はかかりません。必要なデータベース資格情報(bào)を .env ファイルに追加し、適切なデータベース ドライバーを使用していることを確認(rèn)し、config/database.php ファイルを確認(rèn)するだけで準(zhǔn)備完了です。

既存のデータベースでは、Laravel の移行システムを使用して必要なデータベース スキーマを定義できます。データベースを持っていなかったので、データベースを作成し、Laravel Seeder メカニズムを使用して偽のユーザーデータを入力し、フロントエンドに表示しました。その後に私が行ったいくつかの手順は次のとおりです。

• アプリ ディレクトリにユーザー データのモデルを作成し、このデータに関するデータベース リクエストを処理する HTTP コントローラーも作成しました
• resource/js/Pages ディレクトリに Users ページを作成し、ユーザー配列を受け取る prop をそれに提供しました。このユーザー配列は、Inertia で本質(zhì)的に作成された GET リクエストを通じて必要なデータを取得します。 POST リクエストを発行してデータをデータベースに追加することもできます
• routes/web.php ファイルでユーザールートを定義し、HTTP コントローラーをそれにリンクしました

Laravel エコシステムを初めて使用する人、または Laravel でデータベースを頻繁に操作しない人にとって、データベースを移行してデータを設(shè)定する際には、これよりも少し時(shí)間がかかる場(chǎng)合があります。このような場(chǎng)合、構(gòu)成キャッシュをクリアすると、キャッシュされた構(gòu)成オプションによって引き起こされるエラーを取り除くのに非常に役立つ可能性があります。

Inertia.js の使用例

Inertia の潛在的な用途は多岐にわたります。 Inertia を使用して Laravel と最新の JavaScript フロントエンドを組み合わせると、堅(jiān)牢なバックエンド機(jī)能を備えたモノリシック アプリのフルスタック開発が簡素化されます。

すべてのチームや狀況に適しているわけではありませんが、Inertia が良い選択肢と思われる使用例をいくつか紹介します。

• テンプレート化に Blade に依存したくないアプリで、クライアント側(cè)の機(jī)能を処理する堅(jiān)牢なソリューションが必要なアプリ
• バックエンドとして Laravel を使用しているが、主に JavaScript ベースのフロントエンド フレームワーク用に作成および保守されている最新のライブラリを利用したい古いアプリ
• サーバーレスではなく従來のサーバー技術(shù)によって提供される活用を享受するために、Laravel ベースのバックエンドへの移行を計(jì)畫している最新のアプリ
• 検索エンジンでの可視性の向上と SSR のパフォーマンス上の利點(diǎn)を求める SPA
• PHP と JavaScript の両方を愛し、使いたい人向け

Inertia.js 対 Livewire 対 ハイブリッド

Inertia は、サーバー側(cè)とクライアント側(cè)のフレームワークとライブラリをブリッジするための唯一のソリューションではありません。 Livewire と Hybridly も、獨(dú)自の利點(diǎn)と欠點(diǎn)を持つ 2 つの人気のあるツールです。オプションを比較するときは、次の點(diǎn)を考慮するとよいでしょう。

• コミュニティ — Inertia.js のコミュニティは Livewire に比べて比較的小さいですが、Hybridly よりは優(yōu)れています。
• 機(jī)能 — Livewire と Hybridly はフロントエンド フレームワークの実裝サポートを提供しませんが、Inertia.js は主要な JavaScript ベースのフロントエンド ソリューションをサポートすることで知られています。
• パフォーマンス — 主に実裝に依存しますが、Inertia.js ベースの SPA はより優(yōu)れた知覚パフォーマンスを提供できますが、Livewire と Hybridly を使用したサーバー レンダリング アプリは、ほとんどのページがサーバー レンダリングされるため、より優(yōu)れている可能性があります。 .
• ドキュメント — Livewire と Inertia.js には、Hybridly に比べて優(yōu)れたドキュメントがあり、かなり新しく、さらに改善の余地があります。

この表は、決定をさらに詳しく伝えるために、これら 3 つを比較する役立つスナップショットを提供します。

結(jié)論

この導(dǎo)入ガイドでは、Inertia.js とは何か、また、Inertia.js を使用して、Laravel などの従來のバックエンド フレームワークと React などの最新のフロントエンド ライブラリを利用したハイブリッド アプリケーションを作成する方法について學(xué)びました。

Inertia を使用することの長所と短所、その実用的なアプリケーションのいくつか、および Laravel でのセットアップ例について學(xué)びました。ガイドに従っているときに行き詰まった場(chǎng)合は、取り上げたプロジェクト用にこの GitHub リポジトリのクローンを作成することを検討してください。または、コメントを殘してください。喜んでサポートさせていただきます。

---

新しい機(jī)能を構(gòu)築したり、パフォーマンスを向上させるために、新しい JS ライブラリを追加していますか?彼らが逆のことをしていたらどうなるでしょうか？

フロントエンドがより複雑になっていることは疑いの余地がありません。新しい JavaScript ライブラリやその他の依存関係をアプリに追加するときは、ユーザーが未知の問題に遭遇しないように、可視性を高める必要があります。

LogRocket は、JavaScript エラーを自分のブラウザで発生したかのように再生できるフロントエンド アプリケーション監(jiān)視ソリューションで、バグにより効果的に対応できます。

LogRocket は、フレームワークに関係なく、あらゆるアプリで完璧に動(dòng)作し、Redux、Vuex、および @ngrx/store からの追加のコンテキストをログに記録するプラグインを備えています。問題が発生する原因を推測(cè)する代わりに、問題が発生したときにアプリケーションがどのような狀態(tài)にあったかを集計(jì)してレポートできます。 LogRocket はアプリのパフォーマンスも監(jiān)視し、クライアントの CPU 負(fù)荷、クライアントのメモリ使用量などのメトリクスをレポートします。

自信を持って構(gòu)築 — 無料でモニタリングを始めましょう。

以上がInertia.js 導(dǎo)入ガイド: 概要、例、代替案の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。