[Flutter] 글 수정 후 뒤로가기 했을 때 이전 글이 보이는 문제 해결기

“글 상세 → 글 수정 → 수정한 글 상세” 이렇게 이동했는데,
수정이 끝나고 상세 화면에서 뒤로가기를 누르면 수정 전 글이 보이는 현상.

나도 처음엔 Firestore 업데이트가 늦게 반영된 건가 싶었는데,
실제로는 데이터 문제가 아니라 라우팅 스택 구조 문제였다.

GoRouter나 Navigator는 화면을 이동할 때 “스택” 구조로 쌓인다.
즉, push로 이동하면 기존 화면 위에 새로운 화면이 쌓이고,
pop을 누르면 그 위에 있는 화면만 제거된다.

지금 구조를 보면 이렇다.

1. 글 상세
2. 글 수정
3. 수정한 글 상세 (push 또는 pushReplacement로 이동)

이 상태에서 뒤로가기 하면 “글 수정 전 상세”가 그대로 밑에 있어서
결국 예전 데이터를 다시 보게 되는 거다.

이건 Firestore 캐시나 타이밍 문제가 아니라
그냥 “스택에 예전 상세 화면이 남아있기 때문”이다.

핵심은 간단하다.
수정 완료 시, 수정 화면을 먼저 pop하고 그 다음 새 상세 페이지를 pushReplacement로 교체하면 된다.

수정 전 코드

// 이렇게 하면 예전 상세가 밑에 남는다
context.pushReplacement('/community-detail', extra: postId);

수정 후 코드

// 1단계 - 수정 페이지 닫기
context.pop();

// 2단계 - 다음 프레임에 새 상세 페이지로 교체
WidgetsBinding.instance.addPostFrameCallback((_) {
  context.pushReplacement('/community-detail', extra: postId);
});

이렇게 하면 스택이
[목록, 상세(예전), 수정, 상세(새)] → [목록, 상세(새)]
이런 식으로 정리된다.

결과적으로 뒤로가기 하면 “목록 화면”으로 깔끔하게 돌아가고,
수정 전 데이터가 다시 보이는 문제도 사라진다.

만약 수정 후 완전히 다른 흐름으로 이동하고 싶다면
context.go('/community-detail', extra: postId)
이렇게 써도 된다.

다만 go는 스택 자체를 다 비워버려서
뒤로가기 했을 때 아예 홈이나 로그인 화면으로 돌아갈 수도 있다.
그래서 일반적으로는 “pop + pushReplacement” 조합이 UX상 가장 자연스럽다.

 

이 문제는 Firestore 딜레이나 상태 동기화 이슈가 아니라
단순히 “스택 정리 안 한 상태에서 push를 한 것”이 원인이었다.

정리하자면 이렇게 기억하면 된다.

수정 완료 → 현재 화면 닫기(pop) → 새 상세로 교체(pushReplacement)

이 구조로 바꾸면 뒤로가기 시에도 이전 글이 보이지 않고
항상 최신 수정된 글만 정상적으로 보여준다.

---

이걸 한 번 적용해두면 이후 다른 페이지에서도 같은 패턴으로
수정 후 화면 전환을 깔끔하게 유지할 수 있다.
GoRouter 쓸 때 가장 흔하게 놓치는 부분이라 꼭 짚고 넘어가면 좋다.