💻 비드마켓 리팩토링 - 페이지 로딩 적용

⚠️ 정리한 내용은 오타나 잘못된 정보가 있을 수 있습니다. 댓글로 알려주시면 감사하겠습니다.

페이지 로딩 처리

SSR로 데이터를 받아 올 경우 로딩처리가 안되는 문제 발생

상품 카드를 눌렀을 때 getServerSideProps로 서버에서 데이터를 먼저 가져오기 전까지 로딩 처리가 없어서 화면이 멈춰있는 것 처럼 보이는 문제가 발생하였다.

이런 경우 사용자들이 이탈할 가능성이 너무 높기 때문에 개선할 필요성을 느꼈다.

Router.events

위와 같은 것을 개선할 수 있도록 로딩 처리를 쉽게 해 주는 것이 next/router에서 제공하는 router event이다.
router event는 단어 그대로 라우트 주소가 변경되었을 때 트리거 되는 이벤트이다.

router.events

• routeChangeStart(url, { shallow }) - 라우트가 변경되기 시작할때 트리거 됩니다
• routeChangeComplete(url, { shallow }) - 라우트가 완전히 변경되었을 때 트리거 됩니다
• routeChangeError(err, url, { shallow }) - 라우트 변경 중에 에러가 발생했거나, 취소되었을 때 트리거 됩니다

위의 세개의 메서드를 사용하여 로딩 처리를 구현하였다. 이 때 useEffect 훅을 사용하였는데 그 이유는 첫 페이지 로딩 시에 로딩 처리를 해주기 위해서이다.

page/_app.js에 Router.events 적용

또한 page/_app.js에 이벤트를 적용했다. 다음과 같이 적용하게 되면 모든 페이지를 이동할 때마다 SSR로 데이터를 요청하더라도 로딩이 적용 되어 사용자 경험이 개선된다.

결국, 특정한 경우를 제외하고는 모든 페이지에 코드를 하나씩 작성하기보다 app.js에 로딩 처리를 적용하여 관리하기 쉽도록 하였다.

코드

import { Router } from 'next/router';
import { useEffect, useState } from 'react';

function MyApp({ Component, pageProps }: AppProps) {
  const [isLoading, setIsLoading] = useState(false);

  useEffect(() => {
    const startLoading = () => {
      setIsLoading(true);
    };

    const finishedLoading = () => {
      setIsLoading(false);
    };

    Router.events.on('routeChangeStart', startLoading);
    Router.events.on('routeChangeComplete', finishedLoading);
    Router.events.on('routeChangeError', finishedLoading);

    return () => {
      Router.events.off('routeChangeStart', startLoading);
      Router.events.off('routeChangeComplete', finishedLoading);
      Router.events.off('routeChangeError', finishedLoading);
    };
  }, []);

  return (
    <Layout>
    	{isLoading ? <Loading /> : <Component {...pageProps} />}
    </Layout>
  );
}

export default MyApp;

로딩 처리로 개선

🔥 느낀점

next/router에 페이지 이동하는 기능 말고도 이벤트를 처리할 수 있도록 하는 기능도 제공한다는 것을 새로 알게 되었다. 덕분에 로딩처리를 쉽게 할 수 있었다. 하지만 _app.js에서 로딩 처리를 하는 방법이 최선의 방법인지는 조금 더 고민해봐야겠다.

Refer

Nextjs 공식문서 next/router - router events