Next.Js 14의 app router 사용 시 페이지 갱신 처리 방법

🥂와인 관리, 시음노트, 셀러 관리는 마와셀로~🍷 내가 산 와인 가격이 적당할까 궁금할 땐 아래 마와셀 웹에서 확인해보세요👇 작은 광고 양해 부탁드립니다. 👇주인장이 직접 만든 서비스👇

마와셀

Android (Google Play Store)	Apple (App Store)

블로그를 옮기고 나서...

블로그를 옮기고 나서 쓰는 첫 글인 것 같다.

깃블로그에서 쓰던 글을 옮기는 것도 일이라서 하루에 몇 개씩 옮기려 했으나 쉽지가 않다.

이번 주제는 마와셀 웹 서비스를 개발하다가 생긴 문제였다.

와인 가격 등록을 하다가...

이렇게 와인 정보를 입력하고 등록을 누르면 메인 페이지로 돌아가는데 이 때 데이터 갱신이 되지 않는 문제가 있었다.

메인에서 새로운 데이터를 받아와야 하는데 Link를 통해서 이동할 경우 갱신이 되지 않았다.

그래서 구글링을 좀 해본 결과 Next.Js Github에 내용이 있었다.

import { useRouter } from 'next/navigation';

  const apiCallHandler = async () => {
    const res = await fetch(fetch infos);
    const data = await res.json();
    if (success) {
      await asyncFn();
      router.refresh(); // it not works
    }

나도 동일한 문제였다.

How to?

매우 간단했다.

window.location.reload를 통해서 처리할 수 있다는 답변이 있는데 나는 아래와 같이 처리하였다.

    useEffect(() => {
        if (isGetMainData) {
        //메인 데이터 셋업 처리 이후
        window.location.reload;
        }
    }, [isGetMainData]);

특정 상태 값이 변경될 때 컴포넌트에서 useEffect에서 reload를 하면 페이지가 정상적으로 리프래시 된다.

Next.Js 14가 아직 뭔가 버그가 좀 있는것 같다.

업데이트 하면 아마 router도 정상적으로 작동할 듯 싶다.