3分で読めますInertia
Inertia.jsでお手軽に無限スクロール
Inertia.jsではInfiniteScrollコンポーネントが用意されており、
こちらを利用すると簡単に無限スクロールが実装できます。
検証環境
- Inertia.js 2.3.4
- Laravel12
- React19
実装
実装はクライアントサイドとサーバーサイドでそれぞれ行う必要があります。
サーバーサイド
レスポンス部分でInertia::scrollを使用します。
引数にページネーションデータを渡します。
return Inertia::render('transactions/index', [
'products' => Inertia::scroll(fn () => Transaction::paginate())
]);クライアントサイド
データ表示部分をInfiniteScrollコンポーネントでラップします。
import { InfiniteScroll } from '@inertiajs/react'
export default function Index({ transactions }) {
return (
<InfiniteScroll data="transactions">
{products.data.map(transaction => (
<div key={transaction.id}>
{transaction.title}
</div>
))}
</InfiniteScroll>
)
}なんとこれだけで無限スクロールが実装できてしまいます....!!
読み込みの際に少しガタつきがあるのでbufferを設定します。
指定ピクセル分手前で読み込みが開始します。
<InfiniteScroll data="transactions" buffer={300}>
{/* ... */}
</InfiniteScroll>
gifでは分かりづらいですがガタつきが軽減されました。
またInertiaの無限スクロールの良いところとして
スクロールに応じてURLのクエリパラメータ（?page=2など）を自動更新してくれる点があります。
バックエンド側はLaravelのページネーションなどと同じように扱えるのがとても便利です。
Inertia.jsは無限スクロール以外にも面白い機能が結構出ているので注視していこうと思っています。
おしまい。
この記事をシェアする
