2024-03-05 22:58

[Next JS 13] Scroll Restoration

Scroll Restoration이란 말 그대로 스크롤 복원이다.

예를 들어 A페이지에서 B페이지로 이동 후 뒤로가기를 눌렀을 때 이전 A페이지의 스크롤 상태가 유지되는 것이다.

우리 서비스 인포럼에서 페이지네이션이 아닌 무한 스크롤을 사용하고 있기 때문에 사용자 경험을 위해 Scroll Restoration이 필수적이었다.

그러나 Next js 13.2.4에서 Scroll Restoration을 실험적으로 지원했고 nextConfig에 다음과 같이 설정해두면 된다고 했는데 잘 작동하지 않았다.

const nextConfig = {
  experimental: {
    appDir: true,
	scrollRestoration: true,
  },
};

그래서 다른 해결방법을 찾기 위해 블로그 글을 찾아봐도 대부분 Next 12에 대한 자료가 대다수였다.

그러다 Next.js 13.3 or 13.4 버전에서 scroll restoration 문제를 해결했다는 트윗을 확인했다.

그래서 Next13 버전 업데이트를 진행해보기로 했다.

local에서 13.5.1버전으로 업그레이드 후 테스트를 해봤는데 트윗에서 확인한대로 Scroll Restoration이 동작했다!

이제 프로덕션 상태일 때만 잘 되면 되는데... 조금 불안했다.

당시 Next.js의 버전을 13.2.4를 선택했던 이유는 Docker로 배포할 때 안정화된 버전이었기 때문이다.

13.2.4 이상 버전은 Docker로 배포할 때 에러가 났었다.

시간이 지난 지금 fix가 되었길 기대하며 13.5.1 버전으로 업데이트 후 프로덕션에서 상태를 확인했다.

여전히 문제가 있었다...

해결방법을 찾기 위해 구글링에 들어갔다.

next.js 이슈탭에서 관련된 문제를 발견했다

관련 이슈 탭에서 해결책을 찾을 수 있었다.

Next.js 13.4.13에 Docker파일 일부를 수정하면 잘 작동한다고 한다.

그래서 Next.js 13.4.13 버전으로 다운그레이드하고 먼저 local에서 Scroll Restoration이 잘 되는지 확인했다.

다행이 13.4.13 버전도 Scroll Restoration을 지원했다.

이후 Docker파일 맨 밑에서부터 두번째 줄을

ENV HOSTNAME localhost

아래와 같이

ENV HOSTNAME "0.0.0.0"

수정해주었다.

프로덕션 배포도 잘 되고 Scroll Restoration도 잘되는 것을 확인할 수 있었다 :)

Next.js

Docker