Next.jsにおけるリソース追加後のリスト更新

課題

一覧画面に追加モーダルが乗っている画面使用で、追加操作後に裏側の一覧画面が更新されて欲しい。
SWRでいうところの mutate をNext.jsではどう表現すれば良いのか知らなかった。

Next.js:14.2.4

結論

/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の状態が失われないの良い。
https://nextjs.org/docs/app/api-reference/functions/use-router#userouter

また、ページ遷移にrouter.pushを使うとresourceの再fetchがかからなかった。以下のようにすることで、ページ遷移しつつ一覧の更新をすることができた

// current-path: /fuga
import { useRouter } from "next/navigation";
...
const router = useRouter();
...
router.refresh();