Inertia.jsは、従来のサーバサイドルーティングとコントローラを使ったシングルページアプリケーション(SPA)の記述を可能にする。Inertiaがバックエンドとフロントエンドをしっかり結んでくれるので、APIを書く必要はない。開発者は、十分に実績を積んだサーバサイドフレームワーク(Laravel、Ruby on Rails、Dango、AspNetCoreなど)を使用することができる。クライアント上では、React、Svelte、Vueなどを使ったユーザインタフェースの実装が可能だ。
Inertia.jsは、完全クライアントサイドSPAとMPA(マルチページアプリケーション)に挟まれたSPAソリューション空間内において、独自の位置を占める。Inertia自身はアプローチについて、次のように説明している。
Inertiaは従来型のサーバ駆動Webアプリ構築における新たなアプローチです。私たちはこれをモダン・モノリス(modern monolith)と呼んでいます。
Inertiaは、完全にクライアント側でレンダリングされるシングルページアプリケーションを、最新のSPAのような複雑さを伴わずに開発可能にします。そのために、既存のサーバサイドフレームワークを活用しています。
クライアントサイドのルーティングはなく、APIも必要としません。これまでと同じように、コントローラとビューを構築すればよいのです！
Inertiaは3つのクライアントサイドアダプタ(React、Vue.js、Svelte)と2つのサーバサイドアダプタ(Laravel、Rails)を公式に提供しているが、その他にも、コミュニティの開発したアダプタが、AspNetCore、CakePHP、ColdBox、Django、Go、Masonite、Mithril.js、Node.js、Phoenix、Symfony、Yii2など、さまざまなフレームワーク用に提供されている。
Inertiaを使えば、MPAアーキテクチャを採用した場合と同じように、Webアプリケーションを開発することが可能になる。ルーティングや認証、承認、データフェッチなどにはサーバサイドのWebフレームワークを使用するが、ビューはSPAと同じくクライアント側が担当する。資料には次のような説明がある。
[MPAの場合と]唯一違うのはビューレイヤです。ビューはサーバサイドレンダリング(BladeやERBテンプレートなど)ではなく、JavaScriptページコンポーネントで構成されています。これによってReactやVue、Svelteなどを使った、完全なフロントエンドの構築が可能になるのです。
最初にクライアントがページを要求すると、Inertiaは完全なHTML応答を返す。以降の要求に対しては、サーバサイドのInertiaが、ビューを実装したJavaScriptコンポーネントを含むJSON応答(名称とpropが含まれる)を返送する。そしてクライアントサイドのInertiaが、現在表示されているページを新たなコンポーネントによって返された新しいページに置き換えて、履歴状態を更新するのだ。
クライアント側での要求の処理は、独自の<inertia-link>コンポーネントで通常のアンカーリンクをラップすることによって実装される。これによってリンクをインターセプトして、ブラウザの既定の動作(フルページリフレッシュ)をサーバへのXMLHttpRequest(XHR)要求に置き換えるのだ。
Inertiaの要求では、ページリフレッシュと部分的なリフレッシュを区別するために、特別なHTTPヘッダが使用される。X-Inertiaが未設定あるいはfalseのヘッダは、Inertiaクライアントの生成した要求が通常のフルページ移動であることを示している。
サーバ側では、X-Inertia要求ヘッダがtrueにセットされた要求によって、要求されたページを表示するコンポーネントの名称、そのコンポーネントのprops、要求されたURL、バージョン番号を含むJSON応答がトリガされる。
資料には要求に対応する応答オブジェクトとして、以下のような例が紹介されている。
REQUEST
GET: http://example.com/events/80
Accept: text/html, application/xhtml+xml
X-Requested-With: XMLHttpRequest
X-Inertia: true
X-Inertia-Version: 6b16b94d7c51cbe5b1fa42aac98241d5
RESPONSE
HTTP/1.1 200 OK
Content-Type: application/json
Vary: Accept
X-Inertia: true
{
"component": "Event",
"props": {
"event": {
"id": 80,
"title": "Birthday party",
"start_date": "2019-06-02",
"description": "Come out and celebrate Jonathan's 36th birthday party!"
}
},
"url": "/events/80",
"version": "c32b8e4965f418ad16eaebba1d4e960f"
}
バージョンパラメータはアセットのバージョニングのためのもので、要求されたアセットが変更された場合に、サーバが完全なHTML応答を返すことを保証するために使用される。
資料では、一般的に発生するケース(スクロール管理、フォーム、エラー処理、クロスサイト要求強要(CSRF)対策、プログレス表示、ローカル状態のキャッシング、コード分割など)を取り上げている。認証および承認の処理は、選択したサーバフレームワークによってサーバ側で行われる。デモアプリ(Laravel + Vue)がオンラインで公開されている。
Inertiaがターゲットとするのは、自身のスキルや既存コードベースの再利用を望む開発者たちだ。資料には次のようにある。
Inertiaは、LarvelやRuby on Rails、Djangoといったフレームワークを使って、サーバ側レンダリングアプリケーションを構築する開発者のために設計されました。
SPAの代替を提案した記事("If not SPAs, what?"といタイトル)に関するHackernewsでの議論の中で、Ruby on Railsのベテラン開発者のひとりが、Inertiaについて肯定的な意見を述べている。
Ruby on RailsをVue.jsとInertia.jsと合わせて使っていますが、実際に生産性がとてつもなく高くなりました。フロントエンド用にAPIを書く必要も、フロントエンドで独立したルータをメンテナンスする必要も、状態管理をする必要もありません。
このスタックのおかげで、高度にリアクティブなアプリを最小の作業量で構築できます。
その一方で、サーバサイドレンダリングがサポートされていないことを危惧する声もある。
Interia.jsを使ったプロジェクトで開発作業をしていて、近々運用に移るところです。注意しなければならないことのひとつは、Nuxtで可能なようなSSRのサポートがないことです。そのためには、prerender.cloudやprerrender.ioのようなサービスを別途セットアップする必要があります。比較的規模の大きなプロジェクトを考えているのであれば、この点を考慮しておかなくてはなりません。すべての検索エンジンやSEOツールでJavaScriptが動作する訳ではないからです。
Danny Moerkerte氏は、"Your Single-Page App Is Now A Polyfill"と題した自身の記事で、HTMLストリームと、すべてのページ遷移のプロキシとキャッシュを行うサービスワーカを使用することで、より短時間にSPAを記述するテクニックを提案した。新しいページはすべて全ページリロードが行われるが、変化したコンテンツのみをサーバからフェッチする。Inertiaと同じく、こちらもクライアントサイドのルーティングは必要ない。
InertiaはMITライセンスの下で提供される、オープンソースソフトウェアである。フィードバックとコントリビューションは歓迎されるが、Inertiaのコントリビューションガイドラインに従う必要がある。