[Nextjs] useRouter의 Route Events, 페이지 이동간 로딩

[상황]

1. 메인홈에서 페이지이동(레슨신청페이지)시 SSR방식일 경우 getServerProps가 완료되기전까지 화면이동없이 정지화면 처럼 보이는 현상 (아래 스크린샷 참고)

출처 :https://mingeesuh.tistory.com/entry/Nextjs-%ED%8E%98%EC%9D%B4%EC%A7%80-%EC%9D%B4%EB%8F%99%EC%8B%9C-%EB%A1%9C%EB%94%A9-%EC%B2%98%EB%A6%AC%ED%95%98%EA%B8%B0

 

2. 사용자 경험상 클릭을해도 작동을 안한다고 생각해서 여러번 누르게되고, 중복 클릭으로 인한 오작동 가능성이 있음, 특히 뒤로가기 버튼클릭시 작동을 안한다고 생각하여 두번 누르게되어 이전페이지가 아닌 2번째전 history 페이지로 이동하게됨

 

 

[원인분석 및 해결방안]

1. Nextjs SSR 라우팅 특징으로 라우팅진행 되는동안 멈추어 보이는 현상이 있음

2. 페이지 이동과 이동 완료까지 중간에 로딩UI 가 필요

3. Nextjs 의 useRouter, Router 를 사용하여 처리

 

routeChangeStart(url, { shallow }) - 라우트가 변경되기 시작할때 트리거됨.

routeChangeComplete(url, { shallow }) - 라우트가 완전히 변경되었을 때 트리거됨.

routeChangeError(err, url, { shallow }) - 라우트 변경 중에 에러가 발생했거나, 취소되었을 때 트리거됨.

 

4. routeChangeStart 와 routeChangeComplete를 사용

Router.events.on("routeChangeStart", start);

Router.events.on("routeChangeComplete", end);

와 같은 형식으로 사용하여 _app.tsx 에서 event 등록, 페이지이동이 시작될때 start 함수실행, 이때 로딩 setState를 true 하고 페이지이동이 완료될때 end함수를 실행하게하고 이떄 로딩 setState 를 false를 하여 전역에서 아래와 같은 코드 추가

     <Component {...pageProps} />
     {isLoading &&<LoadingComponent />}

참고하기 좋은 사이트:

https://mingeesuh.tistory.com/entry/Nextjs-%ED%8E%98%EC%9D%B4%EC%A7%80-%EC%9D%B4%EB%8F%99%EC%8B%9C-%EB%A1%9C%EB%94%A9-%EC%B2%98%EB%A6%AC%ED%95%98%EA%B8%B0

https://hanbbistory.tistory.com/87