問題
nextjs14のserver actionsを実行後、ページが再描画(/リロード)されてしまう。（クライアントコンポーネントから利用）
原因
server actionsの応答ヘッダーのX-Action-Revalidatedの値が、再描画を指示する指令になっているため。
詳細
server actionでは、アクション完了後の動作をクライアント側に指示するために、応答ヘッダーにX-Action-Revalidatedという項目を付与して利用しているようです。
server actionからの応答ヘッダーの中身
// 再描画が発生しないケース
X-Action-Revalidated: [[], 0, 0]
// 再描画が発生するケース(server actionsで明示的に指示した場合)
X-Action-Revalidated: [["/path"], 0, 0]
// 再描画が発生するケース(revalidateTagが変化した場合)
X-Action-Revalidated: [[], 1, 0]
// 再描画が発生するケース(cookieが変化した場合)
X-Action-Revalidated: [[], 0, 1]
自分の利用している環境下では、server actionsの中で認証情報を更新して利用しているために、cookieの中身が自動的に切り替わってしまい、勝手な再レンダリングが発生してしまったようです。
こちらにも書いてありました。
解決策
現状まだ良い回避策は見つけられていません。
無理やり上げるとすると、
- リロード前提のページ構成にする。
- キャッシュを利用してリロードが走っても、画面が変化しないようにする。
などがあるでしょうか。