<PrefectureCheckbox>の値がOptimistic updateされるようにする

[ReoHakase]

概要

現状の問題点

都道府県チェックボックス<PrefectureCheckbox>の値を押して変更しても、サーバー側でRSCがレンダーされて返却されるまでURLが書きかわらない。そのため、瞬時にチェックボックスの値が更新されない。また、URLが書き変わる前に再度他のチェックボックス<PrefectureCheckbox>を押しても、遷移先が最初の都道府県チェックボックスによる値を含まないものになってしまう。

解決法

1. /[statLabel]のfetch処理を<Suspense>内に移す

サーバー側の修正では対応不可能

• generateMetadata()内でもfetch処理を行っており、これは値が解決されるまでのフォールバックを設定できない。 Loading layer delayed with async head file (app dir) vercel/next.js#45418
• searchParamsのみを更新する遷移では、loading.tsxで設定した<Suspense>バウンダリは呼び出されない。 Updating search params does not trigger suspense fallback or loading.tsx vercel/next.js#53543

2. <PrefectureCheckbox>にステートを追加してOptimistic Updateを実装する

<PrefectureCheckbox>の間で共有ステートを作る必要がある。

• Context
• Jotai
• 親Client Componentを作り、親からイベントハンドラを渡す

[ReoHakase]

テストが楽そうなのは、

親Client Componentを作り、親からイベントハンドラを渡す

実装が楽そうなのは、

Jotai

[ReoHakase]

まずは #58 を試してみることにします。