Open ReoHakase opened 3 months ago
都道府県チェックボックス<PrefectureCheckbox>の値を押して変更しても、サーバー側でRSCがレンダーされて返却されるまでURLが書きかわらない。そのため、瞬時にチェックボックスの値が更新されない。また、URLが書き変わる前に再度他のチェックボックス<PrefectureCheckbox>を押しても、遷移先が最初の都道府県チェックボックスによる値を含まないものになってしまう。
<PrefectureCheckbox>
/[statLabel]
<Suspense>
サーバー側の修正では対応不可能
generateMetadata()
searchParams
loading.tsx
<PrefectureCheckbox>の間で共有ステートを作る必要がある。
テストが楽そうなのは、
親Client Componentを作り、親からイベントハンドラを渡す
実装が楽そうなのは、
Jotai
まずは #58 を試してみることにします。
概要
現状の問題点
都道府県チェックボックス
<PrefectureCheckbox>
の値を押して変更しても、サーバー側でRSCがレンダーされて返却されるまでURLが書きかわらない。そのため、瞬時にチェックボックスの値が更新されない。また、URLが書き変わる前に再度他のチェックボックス<PrefectureCheckbox>
を押しても、遷移先が最初の都道府県チェックボックスによる値を含まないものになってしまう。解決法
1.
/[statLabel]
のfetch処理を<Suspense>
内に移すサーバー側の修正では対応不可能
generateMetadata()
内でもfetch処理を行っており、これは値が解決されるまでのフォールバックを設定できない。 https://github.com/vercel/next.js/issues/45418searchParams
のみを更新する遷移では、loading.tsx
で設定した<Suspense>
バウンダリは呼び出されない。 https://github.com/vercel/next.js/issues/535432.
<PrefectureCheckbox>
にステートを追加してOptimistic Updateを実装する<PrefectureCheckbox>
の間で共有ステートを作る必要がある。