router.refresh(): redirect한 게시물이 새로고침 되지 않는 문제 해결

https://sakuraop.tistory.com/598

게시물 수정 기능 구현, 권한 없는 이용자 접근 제한하기

위의 게시물에서 이어지는 문제 해결 글입니다.

(수정한 게시물로 redirect 하였더니 새로고침이 되지 않는 문제 발생)

---

게시물을 수정하였지만 redirect된 게시물에는 변화가 없습니다.

🔻ㅎㅎ를 지우고🔻

🔻게시물로 redirect 했더니 바로 반영이 안되는 문제🔻

---

업데이트한 게시물이 DB의 데이터와 다른 문제 발생

redirect된 게시물이 업데이트 된 DB 데이터와 다릅니다.

새로고침 하여야 동기화가 됩니다.
원인을 파악하여 다시 요청을 할 수 있도록 해야합니다.

 

원인이 무엇일까?

마지막에 접속했던 게시물 페이지가 캐시된 상태이기 때문일 것이다.

 

http://localhost:3000/post/2 => 게시물에서 수정버튼 클릭

http://localhost:3000/manage/newpost/2 => 수정 페이지로 이동하고 수정 (서버는 업데이트 됐음)

http://localhost:3000/post/2 => 새로고침 없이 캐시된 경로로 되돌아감 (새로운 로드가 없음)

 

정답인지는 모르겠지만 추측할 수 있는 가장 근접한 이유이니, => 브라우저를 새로고침 하는 방법을 찾기

해결방법 router.refresh() // 새로고침 

GPT도 도움 안되고 해서 Next.js 공식 문서 읽어 봄

https://nextjs.org/docs/app/api-reference/functions/use-router

Functions: useRouter | Next.js

 

현재 라우트를 리프레시 해줌으로써 서버 컴포넌트를 리렌더링 해주는 기능

원하던 맞춤 기능이 있네요. 사용해봅시다.

  // 수정하기 버튼 클릭하면,
  const handleClickEditButton = async (e: any) => {
    e.preventDefault();
    try {
      // api 요청을 보내고
      const result = await axios.post(`/api/manage/newpost/${postId}`, {});

      // 게시물로 redirect하기 전 refresh를 하여 캐시된 페이지를 불러오지 않고 서버의 데이터를 새로 가져오도록 합니다.
      router.refresh();
      // 해당 게시물로 redirect 합니다.
      router.push(`/post/${result.data.id}`);
    } catch (error) {
      console.error("게시물 수정 오류:", error);
    }
  };

---

적용 결과 router.refresh()

🔻게시물로 redirect🔻

DB데이터와 일치한 게시물이 나타납니다.