問題

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の中身が自動的に切り替わってしまい、勝手な再レンダリングが発生してしまったようです。

こちらにも書いてありました。

解決策

現状まだ良い回避策は見つけられていません。
無理やり上げるとすると、

リロード前提のページ構成にする。
キャッシュを利用してリロードが走っても、画面が変化しないようにする。

などがあるでしょうか。