[TIL] ssr 로딩지연과 Exhaustive-deps



 

문제

getServerSideProps를 이용하여 api를 요청했을 때 페이지 요청이 너무 오래 걸리는 문제(4~10s) 가 발생했다.

정확히는 api 요청이 아니라 페이지의 로드 자체가 오래 걸렸다.

 

일반적으로는 api 최적화, 로딩스피너 추가, 이미지 최적화 등을 고려해 볼 수 있으나

내 페이지에 이미지는 없었고 api 요청만 존재 했다.

 

그러나 비제한적인 호출을 위해 크롤링 api 를 활용했고 고질적인 시간 지연 문제가 발생했다.

 

api를 최적화 할 순 없나?

유투브 써드파티 라이브러리를 사용하기로 한 이상 속도는 타협해야 했다. 크롤링 후 재가공 결과를 반환하는 api임을 감안하면 현실적인 속도이다.

 

로딩 스피너를 달거나 UI만 미리 불러올 순 없나?

가장 큰 문제는 써드파티 유투브 api는 클라이언트 단에서 호출할 수 없다. 

크롤링 과정 때문에 브라우저api가 아닌 node.js를 사용하여 서버단에서 실행되어야하고

src디렉토리(next)를 사용할 때 getServerSideProps에서 사용되어야한다. 

 

즉 getServerSideProps는 브라우저에 무엇이든 보내기 전에 실행된다.

 

해결

1.nprogress

 브라우저 자체의 로딩과 같은 것을 시각화하여 보여준다.

 

2.to페이지

 로딩은 이동 바로 전 페이지에서 이루어지므로 중간 로딩페이지를 만든다.

 

나의 경우는 2번으로 해결하기로 했다.

 

import React, { use, useEffect } from 'react';
import { useRouter } from 'next/router';

function Main() {
    const router = useRouter();
    useEffect(() => {
        router.push('/mainRaw', '/main');
    }, []);

    return <div>Loading...</div>;
}

export default Main;

기존의 메인페이지를 /mainRaw로 바꾸고 

로딩페이지로 /main을 만들었다.

 

위 main 으로의 진입은 /main으로 마스킹 된 /mainRaw로 이동한다.

 

이같은 구조를 통해 /main에서의 새로고침 로딩도 대응할 수 있었다

 

결론

getServerSideProps는 브라우저에 무엇이든 보내기 전에 실행된다

이후 캐쉬처리를 할 생각이다.

 

문제2

useEffect 훅의 의존성 배열에 필요한 모든 변수를 포함시키도록 강제하는 정책은 "Exhaustive-deps" 규칙입니다.

 이 규칙은 ESLint의 React Hook 규칙에 포함되어 있으며, react-hooks/exhaustive-deps라는 규칙으로 구현되어 있습니다.

 

 이 규칙을 사용하면, useEffect, useMemo, useCallback과 같은 훅의 의존성 배열에 필요한 모든 변수를 명시적으로 포함시키도록 강제할 수 있습니다. 이렇게 하면 버그를 방지하고 코드의 안정성을 높일 수 있습니다. ESLint 설정 파일에 다음과 같이 규칙을 추가하여 이 규칙을 활성화할 수 있습니다:

{
  "extends": [
    "react-app",
    "react-app/jest"
  ],
  "rules": {
    "react-hooks/exhaustive-deps": "warn"
  }
}