nextJS 사용하는 iOS 단말기에서 뒤로가기 페이지 흰색 이슈

ios swift로 만든 wkWebView에서 페이지 크기가 큰 a페이지에서 스크롤을 내린상태에서 b페이지로 이동 하고 다시 a페이지로 가기 위해서 뒤로가기를 누르게 되면 a페이지 화면이 하얀색으로 나오게된다. 이상태에서 스크롤을 내리거나 클릭하면 페이지가 정상적으로 나오는 문제가 발생하였다.

 

문제

### 전제조건 : a.page가 b.page보다 컨텐츠 내용이 많아서 스크롤이 길다

### 1. a.page
### 1.1. a.page에서 b페이지 크기의 스크롤 위치보다 더아래 위치로 스크롤을 내린다.
### 1.2. b.page를 아래 코드로 이동
  ...
    const push = useCallback(async (path, as, options) => {
      return await router.push(path, as, { shallow: true, scroll: false });
    }, []);
  ...


### 2. b.page 
### 2.1. a.page로 돌아가기 버튼 클릭
  ...
    const back = useCallback(async () => {
    return new Promise((resolve, reject) => {
      router.back();
      setTimeout(() => {
        resolve();
      }, 100);
    });
  }, []);
  ...


### 3. a.page
  하얀색 화면... OTL...

 

 

처음에는 iOS 문제인줄 알고 swift코드를 아무리 살펴 보고 테스트를 진행해봐도 원인을 찾을 수가 없었다.

혹시나 해서 back하지 않고 페이지 이동을 하였더니 정상적으로 동작하였다. 뭐지..? 캐시? 스크롤?

이떄부터 iOS Swift 캐시부터 히스토리 관련 설정을 겁나게 수정하게서 테스트를 진행하였지만 안된다.. OTL..

 

좌절하던 그때 문뜩

nextJS와 연관성이 있을것 같다는 생각이 들어서 구글링 하다가 아래 이슈를 발견하게 되었다.

https://github.com/vercel/next.js/discussions/44013

 

이건 iOS 문제야 라고 단정짓고 해결책을 찾으려고 하다보니 문제를 해결하는데 반나절이나 걸렸다. 앞으로는 중립을 지키자.. 지피티도 너무 믿지 말자..!

 

해결

next.config.js

const nextConfig = {
  ...
  experimental: {
    scrollRestoration: true,
  },
  ...
};
module.exports = nextConfig;

 

 

iOS 사파리 이슈는 워낙에 많은지라 정확한 원인까지는 찾는데 시간이 많이 소요 될듯하여 급한불은 껏으니 여기서 멈추자!! 더이상 안되!!

이후에 nextJS버전을 올린뒤에 동일한 증싱아 발생하는지 테스트를 위해 기록해 두자!

(iOS에서만 발생하는 이슈니 찜찜하지만 일단은 넘기자!!)