next.js Link 태그를 사용하면 document.referrer가 작동이 안되는 이유

작업을 하면서 document.referrer을 이용하여 뒤로 가기 버튼을 누를 때 우리 자사 사이트내로 이동하는 거면 이전 페이지로 이동을, 그게 아니라면 홈으로 돌아가는 로직을 사용하고 있었으나 이번에 개발하는 페이지들에서 이 로직이 예상한대로 작동하지 아니하고, 모두 홈으로 발견하는 버그가 발생됐다.

이유

해당 원인을 서칭하던 중 아래 1) 기술 블로그 글을 발견하여 next/link 의 Link 태그 사용 시 document.referrer이 빈 문자열을 발생시킨 다는 사실을 알게 됐다.

Link 태그는 페이스북 픽셀 버튼 처리를 위해서 이번 태스크부터 적용하고 있었는데 사실 이 문제 말고도 동적 페이지 라우팅을 연결하는 부분 등 여러 군데에서 예상치 못한 버그를 발생시켜서 생각보다 작업시간을 잡아먹기도 했다. ( 시간에 쫓겨 작업하느라, 제대로 된 리서치를 하지 못하고 작업하다보니 Link 태그 연결로 인한 원인임을 파악하지 못했던 것이 아쉽다 )

태스크 끝내고 회고하며 주말에 다시금 Next.js Link 태그에 대해서 서칭하는 시간을 가졌다. 2) 기술 블로그 글은 그 중 Link 태그에 대해서 갖고 있던 고민에 대해 도움이 된 글이기에 같이 첨부한다.

참조:

1) Next.js 애플리케이션에서 이전 경로 가져 오기

2) Next.js Link 태그안에 a tag를 안넣어도 왜 잘 작동될까?