Next13 블로그 프로젝트
router.refresh(): redirect한 게시물이 새로고침 되지 않는 문제 해결
sakuraop
2023. 9. 19. 01:00
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
현재 라우트를 리프레시 해줌으로써 서버 컴포넌트를 리렌더링 해주는 기능
원하던 맞춤 기능이 있네요. 사용해봅시다.
// 수정하기 버튼 클릭하면,
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🔻