inertiaの遅延読み込みに迫り、deferred propsでuxを最適化する by ずみ

Laravel×Inertia.js構成のSPAで、CSVから5,000件のデータを取得し複数テーブルを参照して表示する処理を実装した結果、ユーザーは真っ白な画面を十数分待つことになってしまいました。

まずEloquentのlazyById()で1,000件ずつ分割処理を試みましたが、すべての処理完了まで画面表示できず、5分待たされます。次にInertia.jsのlazyプロパティを導入したところ、初回表示が短縮され、重い処理は後から非同期で読み込まれるようになり、ユーザー体験は大きく改善しました。

さらにlazyに関して調査を進めると、Inertia.js v2.0で追加された「Deferred Props」という機能に出会いました。実際に導入してみると、lazyよりもパフォーマンスが向上し、コードもシンプルになりました。しかし、なぜDeferredの方が優れているのでしょうか。

本セッションでは、lazy propsとDeferred Propsの違いを内部実装から読み解きます。具体的には、HTTPリクエストの発生タイミング、サーバーサイドでのデータ解決の仕組み、なぜDeferredの方がパフォーマンスが良いのかを、LaravelとInertia.jsのコードベースを追いながら解説します。そして最後に、実践的な使い分けパターンをお伝えします。

このトークは、Inertia.jsを使っているけど遅延読み込み機能を使ったことがない方、v2.0の新機能が気になる方、大量データ表示で困っている方、「なぜ速くなるのか」を理解したい方に是非聞いていただきたいセッションです。