NextJSの本当にあった怖い話

導入

あるプロジェクトで、ユーザー認証が必要なフルスタックアプリケーションをNextJSを使用して開発することになりました。このサービスはチャット機能を提供し、過去のチャット履歴を初期表示時にロードする機能がありました。

開発期間はタイトでしたが、予定通りに開発を完了し、一時の安堵（あんど）を得ていました。しかし、その後すぐに一つの問題が発覚しました。

不具合

ログアウト後、別のユーザーでログインしても1つ前のユーザーのチャット履歴が表示されてしまっていました。。。

業務アプリで秘匿情報を扱うため、リリース前に気づいて良かったと思います…

不具合の原因

この不具合の原因は、ログアウト処理をnext/navigationを使用してログアウト画面へ遷移させているため、Redux store内のデータがクリアされずに残ってしまっていたことにありました。
その結果、別のユーザーがログインしても、そのユーザーのチャット履歴がない場合ではRedux storeのデータが保持されてしまい、前のユーザーのデータを表示してしまう事態が発生していました。

解決策

この問題は、ログアウト処理を行う際に、Redux storeのデータもクリアすることで解決しました。具体的な実装例は以下のようになりました。

// ログアウト処理時にstoreをクリアする
const logout = () => {
  store.clear();
  // ログアウト処理やログイン画面へのrouting
}

終わりに

今回はNextJSを例に挙げましたが、SPAの技術では起こりやすい問題かなと思っています。ヒューマンエラーを回避するためにはいっそのことJavaScriptによるルーティングをなくしちゃえ、、、というのも個人的には全然アリだとは考えています（ただUX観点でどうなのか、、、など別の課題は出ると思いますが）

この記事を読んで、より良い実装方法や他に注意すべき点、似た事例があれば、ぜひコメントで共有いただけますと幸いです。