Inertiaを使えば、これまで慣れ親しんできたサーバーサイドWebフレームワークを使って、これまで通りアプリケーションを構築できます。ルーティング、コントローラー、ミドルウェア、認証、認可、データフェッチなど、フレームワークの既存機能をそのまま活用できます。
ただし、Inertiaはアプリケーションのビュー層を置き換えます。PHPやRubyのテンプレートによるサーバーサイドレンダリングではなく、アプリケーションから返されるビューは、JavaScriptのページコンポーネントになります。これにより、React、Vue、Svelteを使ってフロントエンド全体を構築しながら、Laravelなどの好みのサーバーサイドフレームワークの生産性を享受できます。
ご想像の通り、単純にJavaScriptでフロントエンドを作成するだけでは、シングルページアプリケーションの体験は得られません。リンクをクリックすると、ブラウザはページ全体を訪問し、その後のページ読み込み時にクライアントサイドフレームワークが再起動されます。Inertiaはまさにこの点を大きく変えます。
Inertiaの中核は、基本的にクライアントサイドのルーティングライブラリです。ページ全体をリロードすることなく、ページを訪問できます。これは、通常のアンカーリンクを軽量にラップした`<Link>
`コンポーネントを使用して行われます。Inertiaリンクをクリックすると、Inertiaはクリックをインターセプトし、XHR経由で訪問を行います。JavaScriptで` router.visit()
`を使用して、プログラムでこれらの訪問を行うこともできます。
InertiaがXHR訪問を行うと、サーバーはそれがInertia訪問であることを検知し、完全なHTMLレスポンスを返す代わりに、JavaScriptページコンポーネント名とデータ(props)を含むJSONレスポンスを返します。Inertiaは、以前のページコンポーネントを新しいページコンポーネントと動的に交換し、ブラウザの履歴状態を更新します。
その結果、非常にスムーズなシングルページ体験が実現します。 🎉
Inertiaの内部動作に関する、より詳細な技術的詳細については、 プロトコルページ.