[Next js] Link vs Router

스탬프를 추가하는 작업 후 바로 스탬프목록으로 이동했을 때 추가한 스탬프까지 바로 반영된 화면이 보여야하는데 반영안된상태로 새로고침이 되야 반영이되는 문제가 있다.

이전코드

//스탬프 추가 후 목록으로 넘어가는 버튼
<Link href={'/stamp-all'}>
      <p className="w-full rounded-[12px] bg-secondary-500 py-[21px] text-center font-semiBold text-[#004157] hover:bg-[#BDEFFF]">
         알겠어요!
      </p>
</Link>

이 전 코드는 단순 링크이동을 위해 Link를 사용하여 이동되도록 했다.

수정코드

<button onClick={() => {
            router.push('/stamp-all');
            router.refresh();
          }}>
          <p className="w-full rounded-[12px] bg-secondary-500 py-[21px] text-center font-semiBold text-[#004157] hover:bg-[#BDEFFF]">
            알겠어요!
          </p>
        </button>

수정된 코드는 Link -> button로 변경 후
router.push('/stamp-all') 로 페이지이동하게 하고
router.refresh(); 로 데이터를 갱신하면서 강제로드되도록 하였다.

router.refresh()
: 현재 페이지를 클라이언트에서 새로고침 없이 강제로 다시 로드하는 기능

언제 사용할까 ?

• 데이터 갱신 : 데이터를 수정, 삭제, 추가한 후 서버에서 최신 상태를 가져와야 할 때
• 서버 상태 동기화 : 클라이언트와 서버 간 데이터 불일치를 해결할 때

-> 난 두 경우 모두 해당되기때문에 refresh()를 사용하여 해결하였다.

---

Link vs Router

• 두 개 모두 Next.js에서 페이지 간 이동을 처리할 때 사용한다.
  그럼 차이점은?

Link

사용자가 클릭할 수 있는 정적인 내비게이션 링크를 만들 때 사용한다.

언제 사용?

• 페이지 간 이동이 주로 클릭으로 이루어지는 경우
• 사용자 경험 개선
  Link는 Next.js의 Prefetching 기능을 활용하여 해당 경로 데이터를 미리 가져옵니다. 이를 통해 이동 속도가 빨라집니다.

Router

Next.js의 훅으로, 프로그래밍 방식으로 경로 이동을 처리할 때 사용한다.

언제 사용?

• 특정 이벤트가 발생했을 때 코드에서 경로를 변경해야 할 경우.
  (폼 제출 후 이동, 데이터 업데이트 후 이동 등)

• 조건부 라우팅, URL 파라미터 동적 설정 등 코드에서 더 많은 제어가 필요한 경우.