Open2
Next.js - データ更新後にrouter.refresh()かrevalidateを行って更新結果を画面に表示する
tanakakc
Next.jsでバックエンドのデータ更新APIを叩いてその更新結果を画面に表示する際にハマったのでメモ。
Next.jsではサーバー側、クライアント側でデータのキャッシュを行っている。
色々と調べてサーバー側のキャッシュをオフにすれば解決するかと思ったが、クライアントキャッシュが残ってしまい更新を反映できなかった。
クライアントキャッシュの削除はクライアント側で router.refresh()するかサーバー側でrevalidatePath / revalidateTagをしないとできないっぽい。
例えば、/posts/:idで個別の記事を更新したあと、一覧画面に遷移させて更新結果を表示させたい場合は下記のいずれかのように書く必要があった。
const onSubmit = async (data) => {
// データ更新処理
// /postsに遷移させてからrouter.refresh()でサーバーコンポーネントを再レンダリングさせる
// 順番が逆になると/posts/:idのキャッシュを更新するだけになってしまい/postsのキャッシュは消せないので注意
router.push("/posts");
router.refresh();
};
const onSubmit = async (data) => {
// データ更新処理
// revalidtePath("/posts")を行うサーバーアクションを定義してimportしてクライアント側で呼び出す
await someServerActionWithRevalidate();
router.push("/posts")
};
調べてる途中に知ったこと
- developmentモードでは常にサーバー側のキャッシュはno-store,must-revalidate
- production用にビルドすると、指定したサーバーキャッシュの設定になる