fluid_27’s blog

勉強した内容をアウトプットするためのブログ

Inertia.jsとは

Inertia.jsとは?

LaravelなどのバックエンドフレームワークとVue.jsまたはReactなどのフロントエンドライブラリを統合するためのライブラリ。
Inertia.jsの主要な概念は、バックエンドでテンプレートをレンダリングし、そのテンプレート内でVue.jsまたはReactコンポーネントを使用する方法を提供する。
通常、LaravelのBladeテンプレートエンジンなどを使用してテンプレートをレンダリングし、Inertia.jsを使用してフロントエンドでインタラクティブコンポーネントを制御する。
これにより、SPAのようなユーザーエクスペリエンスを提供できる一方、バックエンドとフロントエンドをシームレスに統合できる。



以下、各サイトからの引用。

Inertiaは、基本的にクライアントサイドのルーティングライブラリです。ページ全体を再読み込みすることなく、ページを移動できます。移動は標準的なアンカータグの軽量ラッパー、コンポーネントによって実現します。
Inertiaのリンクをクリックすると、Inertiaがそのクリックを遮断し、XHRにリダイレクトします。これによって、ブラウザでページが再読み込みされることがなくなり、シングルページとしての挙動が確保できます。
https://kinsta.com/jp/blog/laravel-inertia/

Jetstreamが提供しているInertia.jsスタックは、テンプレート言語としてVue.jsを使います。
Inertiaアプリケーションの構築は、多くの部分が典型的なVueアプリケーションの構築と似ています。しかし、Vueのルータの代わりにLaravelのルータを使います。InertiaはLaravelコンポーネントデータの名前を提供することにより、LaravelのバックエンドからVueコンポーネントの単一ファイルをレンダーできるようにする小さなライブラリーです。
言い換えればこのスタックは、複雑なクライアントサイドのルーティングを使用せず、Vue.jsのフルパワーを提供します。今まで使ってきたLaravelの標準ルータが使用できます。
https://readouble.com/jetstream/1.0/ja/inertia.html

Inertia は従来のサーバー駆動型 Web アプリを構築するための新しいアプローチです。
Inertia にはクライアント側のルーティングがなく、API も必要ありません。いつものようにコントローラーとページビューを構築するだけです。Inertia はどのバックエンド フレームワークでもうまく機能しますが、Laravel用に微調整されています。
https://inertiajs.com/