thinkstream

アセットのバージョニング

シングルページアプリを構築する際によくある課題のひとつが、アセットが変更されたときにサイトのアセットを更新することです。幸い、Inertia では現在のサイトアセットのバージョンを任意で追跡することで、これを簡単に実現できます。アセットが変更されると、Inertia は次のリクエストで XHR 訪問の代わりに自動的にフルページ訪問を行います。

設定

アセットの自動更新を有効にするには、Inertia に現在のアセットバージョンを伝える必要があります。これは、アセットが更新されたときに変更される限り、任意の文字列（文字、数字、またはファイルハッシュ）で構いません。

通常、アプリケーションのアセットバージョンは、Inertia の HandleInertiaRequests ミドルウェア内の version メソッドで指定します。

php
class HandleInertiaRequests extends Middleware
{
    public function version(Request $request)
    {
        return parent::version($request);
    }
}

あるいは、Inertia::version() メソッドを使って手動でアセットバージョンを指定することもできます。

php
use Inertia\Inertia;

Inertia::version($version);
Inertia::version(fn () => $version); // 遅延評価...

キャッシュバスティング

Inertia におけるアセットの更新は、ハードなページ遷移がアセットの再読み込みを引き起こす、という前提で動作します。しかし、Inertia 自体がこれを強制する処理を行っているわけではありません。通常は、何らかのキャッシュバスティングによって実現します。たとえば、アセット URL の末尾にバージョンのクエリパラメータを付与する方法です。

Laravel の Vite 連携を利用している場合、アセットのバージョニングは自動的に行われます。Laravel Mix を使用している場合は、webpack.mix.js ファイルで versioning を有効にすることで自動化できます。

手動更新

アセットの更新を自分で制御したい場合は、HandleInertiaRequests ミドルウェアの version メソッドから固定値を返すことができます。これにより、Inertia の自動アセットバージョニングが無効になります。

たとえば、フロントエンドの新しいバージョンが利用可能になったときにユーザーへ通知したい場合でも、実際のアセットバージョンを 共有データ として含めることで、フロントエンドに公開することができます。

php
class HandleInertiaRequests extends Middleware
{
    public function version(Request $request)
    {
        return null;
    }

    public function share(Request $request)
    {
        return array_merge(parent::share($request), [
            'version' => parent::version($request),
        ]);
    }
}

フロントエンド側では、version プロパティを監視し、新しいバージョンが検出されたときに通知を表示できます。