서비스 리뉴얼 오픈을 앞두고 SEO 이슈가 있었다. 불과 며칠 전에 Next.js 13과 chakra 사이의 이슈로 보고 우회를 적용했었다. 그 이후에 (이제서야) Next.js의 모든 문서를 정독하고 근본적인 해결책을 찾았다.

인스타그램 같은 서비스는 이런 상황에 어떻게 SEO를 할까 궁금해서 코드를 열어보니 내부 콘텐츠는 하나도 없고 서버 사이드에서는 헤드의 메타들만 반환하고 있었다. 생각해 보니 우리 서비스도 그렇게 만들면 되겠더라.

서버 컴포넌트로 감싸고 메타를 반환하고, 클라이언트 컴포넌트를 포함하도록 말이다. 간단히 예제를 만들어서 테스트하니 잘 동작했다. 그 과정에서 컨텍스트를 공유해야 하는 Provider를 클라이언트 컴포넌트 계층으로 내리니 코드 구조가 (조금) 깔끔해졌다. 명확해지기도 했고.

그러면서 기존 루트 레이아웃에서 하고 있던 auth 관련 라우팅을 미들웨어로 보낼 수 있게 되었다. 그런데 또 다른 문제에 직면했다. 미들웨어에서 리다이렉트한 요청이 자꾸 캐싱 되어 문제가 발생했다. 이 요청이 캐싱 되면 미로그인 상태에서 로그인 정보가 필요한 페이지 접근 시 로그인 페이지로 강제 이동시키는데, 로그인해도 이전 요청의 캐시로 인해 로그인 페이지로 이동되었다.

또 수많은 삽질 끝에, 공식 문서에서 답을 찾았다. next/navigation의 useRouter안에 refresh함수눈 서버 컴포넌트 계층부터 새로 렌더링하는데, 클라이언트의 상태와 브라우저 상태를 보존한다고 쓰여있었다. 즉 서버 계층에서 사용하던 링크 캐시를 초기화해 준다는 것이다.

적용하고 나니 아주 자연스럽게 처리되었다. 분명 수많은 깃헙 이슈와 디스커션, 스택오버플로우를 살펴봤으나, 정답을 찾은 곳은 공식 문서다.
하지만 문제를 해결하기에 공식 문서를 살펴보는 건 생각보다 어렵다. 이슈 중심으로 정리되어 있지 않기 때문이다. 그러니, 일찌감치 정독하고 숙지해야 하는 것 같다.

또다시 부족함을 확인했다. 뿌듯하다.