nextjs scroll restoration (스크롤 유지)

비슷한 기능을 구현해본 적이 있긴하지만, 질문자님의 웹 사이트 동작 방식이 어떤지 몰라서 명확한 답을 드릴 순 없을 것 같네요 😟 일단 질문자님이 공유해주신 링크의 원문 중 참조한 링크(https://github.com/vercel/next.js/commit/38bd1a024cb25923d8ea15f269a7294d073684d8)를 보시면 next.js에서 해당 기능을 어떻게 구현했는지 볼 수 있네요. 저라면 요거 좀 더 살펴보고 현재 웹 사이트에 적용했을때 문제 없는지 파악하는데부터 시작할 것 같아요. 일단 막연하게 생각해보면, next.js를 어떻게 사용하는지에 따라서 기능 구현 방법이 달라질 수 있습니다. 예를 들면, 인피니트 스크롤 형식의 페이지에 react-query와 pagination을 적용해서 데이터를 불러오는 페이지의 경우, 뒤로가기를 통해 재방문했을 때 전에 요청했던 pagination page의 데이터까지 보존하고 있어야 DOM의 크기도 그만큼 커질 수 있고 스크롤이 내려갈 수 있겠죠? react-query와 SSR을 사용하신다면 요청한 key의 데이터가 의도치않게 갱신되는 것도 신경 쓰셔야할거구요. 질문자님의 웹 사이트가 어떤 방식으로 돌아가는지 구체적이지 않아서 명확한 답을 드리기는 어렵지만, 시간이 되신다면 공식 문서, 다른 기술 블로그, 스택오버플로우를 찾아보시면서 생각해보시면 좋을 것 같습니다. 개인적으로는 깡으로 구현하는 것보다 라이브러리가 있다면 쓰자 주의긴한데, 이건 상황에 따라 다를 것 같아요 참고로 "커리어리 사이드 프로젝트 페이지" (https://careerly.co.kr/lounge/side-projects)에 스크롤 유지가 적용되어 있는데 CSR과 next.js의 스크롤 유지 기능을 살짝 손봐서 만들었습니다 🙂

https://www.npmjs.com/package/next-easy-keepalive 제가 만든 keep-alive 입니다 한번 사용해보세요~

안녕하세요! Next.js에서 스크롤 유지 기능을 구현하는 방법은 다양하지만, 가장 간단한 방법은 다음과 같습니다. 1. _app.js 파일에 scrollRestoration 설정 추가 2. 아래 코드에서 'scrollRestoration'을 'manua'l로 설정하고, 'cachedScrollPositions' 객체를 통해 각 페이지별 스크롤 위치를 기억합니다. 3. 'beforeunload' 이벤트를 통해 페이지 이동 시점에 스크롤 위치를 저장하고, 'routeChangeComplete' 이벤트를 통해 이전 페이지의 스크롤 위치를 찾아와 복원합니다. 이 방법을 사용하면 실험적인 기능을 켜지 않고도 간단하게 스크롤 유지 기능을 구현할 수 있습니다. 하지만, 이 방법은 페이지 이동 시점마다 스크롤 위치를 저장하므로 메모리 사용량이 증가할 수 있습니다. 이 문제를 해결하기 위해 스크롤 위치 저장을 로컬 스토리지나 쿠키를 사용하여 관리할 수도 있습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
import { useEffect } from 'react';
import { useRouter } from 'next/router';

function MyApp({ Component, pageProps }) {
  const router = useRouter();

  useEffect(() => {
    // 뒤로가기 시 스크롤 위치를 이전 위치로 복원
    if ('scrollRestoration' in history) {
      history.scrollRestoration = 'manual';
      const cachedScrollPositions = {};

      const onBeforeUnload = () => {
        cachedScrollPositions[window.location.pathname] = [window.scrollX, window.scrollY];
      };
      window.addEventListener('beforeunload', onBeforeUnload);

      const onRouteChangeStart = () => {
        cachedScrollPositions[router.pathname] = [window.scrollX, window.scrollY];
      };
      router.events.on('routeChangeStart', onRouteChangeStart);

      const onRouteChangeComplete = (url) => {
        if (cachedScrollPositions[url]) {
          setTimeout(() => window.scrollTo(...cachedScrollPositions[url]), 0);
        }
      };
      router.events.on('routeChangeComplete', onRouteChangeComplete);

      return () => {
        window.removeEventListener('beforeunload', onBeforeUnload);
        router.events.off('routeChangeStart', onRouteChangeStart);
        router.events.off('routeChangeComplete', onRouteChangeComplete);
      };
    }
  }, [router]);

  return <Component {...pageProps} />;
}

export default MyApp;