📌
Next.jsにおけるリソース追加後のリスト更新
課題
一覧画面に追加モーダルが乗っている画面使用で、追加操作後に裏側の一覧画面が更新されて欲しい。
SWRでいうところの mutate
をNext.jsではどう表現すれば良いのか知らなかった。
結論
/next/navigation
の router.reflesh()
を使うと良さそう。
詳細
router.refresh(): Refresh the current route. Making a new request to the server, re-fetching data requests, and re-rendering Server Components. The client will merge the updated React Server Component payload without losing unaffected client-side React (e.g. useState) or browser state (e.g. scroll position).
リソースを再fetchしてServerComponentのみ再レンダリングされるとのこと。ClientComponentの状態が失われないの良い。
また、ページ遷移にrouter.pushを使うとresourceの再fetchがかからなかった。以下のようにすることで、ページ遷移しつつ一覧の更新をすることができた
// current-path: /fuga
import { useRouter } from "next/navigation";
...
const router = useRouter();
...
router.refresh();
Discussion