仕組み

使い慣れたツールをそのまま使う

Inertia を使えば、これまで選んできたサーバーサイドの Web フレームワークと同じ感覚でアプリケーションを構築できます。ルーティング、コントローラ、ミドルウェア、認証、認可、データ取得など、フレームワークが既に提供している機能をそのまま利用します。

一方で、Inertia はアプリケーションのビュー層を置き換えます。PHP や Ruby のテンプレートによるサーバーサイドレンダリングの代わりに、アプリケーションが返すビューは JavaScript のページコンポーネントになります。これにより、Laravel や好みのサーバーサイドフレームワークの生産性を享受しつつ、フロントエンド全体を React、Vue、Svelte で構築できます。

リクエストのインターセプト

ご想像のとおり、フロントエンドを単に JavaScript で作るだけでは、シングルページアプリケーションの体験は得られません。リンクをクリックすると、ブラウザはページ全体を再読み込みし、その結果、次のページロード時にクライアントサイドのフレームワークが再起動してしまいます。ここで Inertia がすべてを変えます。

本質的に、Inertia はクライアントサイドのルーティングライブラリです。ページ全体を再読み込みすることなく、ページ遷移を行えます。これは、通常のアンカーリンクを軽量にラップした <Link> コンポーネントを使って実現されます。Inertia のリンクをクリックすると、Inertia がそのクリックをインターセプトし、代わりに XHR 経由で遷移を行います。さらに、router.visit() を使えば、JavaScript からプログラム的に遷移を行うこともできます。

Inertia が XHR による遷移を行うと、サーバーはそれが Inertia のリクエストであることを検知し、完全な HTML レスポンスを返す代わりに、JavaScript のページコンポーネント名とデータ（props）を含む JSON レスポンスを返します。その後、Inertia は以前のページコンポーネントを新しいページコンポーネントに動的に差し替え、ブラウザの履歴状態を更新します。

最終的な結果は、驚くほど滑らかなシングルページ体験です。

Inertia が内部でどのように動作しているのか、その細かな技術的詳細については、プロトコルのページ をご覧ください。