ScrollRestorationの導入

[kagomen]

現状

スクロール位置が不自然

• 初めて訪れるページなのにページ上部から表示されない
• 戻るとスクロール位置が変化してしまっている

タスク

• [ ] BrowserRouterからcreateBrowserRouterへ変更（ScrollRestrationがBrowserRouterに対応していないため）
• [ ] BrowserRouterの導入

メモ

42 を終えてから実装にとりかかる

[kagomen]

これは、すべてのReact Routerウェブプロジェクトで推奨されるルーターです。DOM History API を使用して URL を更新し、履歴スタックを管理します。

また、ローダー、アクション、フェッチャーなどのv6.4データAPIを有効にします。

データAPIの設計では、フェッチとレンダリングが切り離されているため、静的に定義されたルートのセットで、Reactツリーの外にルーターを作成する必要があります。この設計の詳細については、Remixing React RouterブログポストとWhen to Fetchカンファレンス講演を参照してください。

https://reactrouter.com/en/6.23.1/routers/create-browser-router

[kagomen]

伝統的には、ウェブブラウザで以前に訪れたページに戻ると、そのページは前回見ていた位置にスクロールされた状態で表示されます。これは「スクロール復元」と呼ばれ、クライアントサイドでデータを取得するウェブアプリケーションが増えるにつれて、少しずつ減少しています。しかし、TanStack Queryを使用すると、その問題は解消されます。

TanStack Queryでは、すべてのクエリ（ページネーションや無限スクロールのクエリも含む）に対して、「スクロール復元」がデフォルトで機能します。これが可能なのは、クエリ結果がキャッシュされており、クエリがレンダリングされるときに同期的に取得できるためです。クエリが十分に長くキャッシュされている限り（デフォルトの時間は5分）、ガベージコレクションされていない場合は、常にスクロール復元が自動的に機能します。

要するに、TanStack Queryを使えば、ページのスクロール位置が保持されるので、ユーザーは前回見ていた位置からすぐに続きを見ることができます。これは、特にクエリ結果がキャッシュによってすぐに利用可能になるためです。

もしかして必要ない？

[kagomen]

ReactQueryの導入により、ReactRouterでScrollRestorationを設定する必要がなくなったので、クローズ