[TIL] getServerSideProps

서론

서드파티 라이브러리인 'scrape-youtube'를 사용하면서 에러에 부딪혔다

Module not found: Can't resolve 'dns' // access mongodb

위 라이브러리가 리액트를 위한 라이브러리가 아니고 기능적으로 유투브를 크롤링 해 파싱 후 데이터를 재가공하여 넘겨주는 라이브러리라 진행 도중 몽고db에 접근하는 것으로 보인다. 즉 서버 사이드단에서 처리가 필요해 보인다.

 

해결

export const getServerSideProps = async () => {
    const { videos } = await youtube.search('김재관');
    const videosJson = JSON.stringify(videos);
    return {
        props: {
            videosJson,
        },
    };
};

위와 같이 서버 단에서 실행 시켜주어 받아온 값을 직렬화 후 props로 페이지로 보낸다.(정상적인 과정에서는 직렬화가 필요 없다.)

 

위와같은 작업이 커스텀훅에서 작동하나 의문점이 들었으나

컴포넌트와 커스텀훅은 클라이언트 사이드에서 동작하고 getServerSideProps와 같은 데이터 패칭 메서드는 서버 사이드에서 실행되며 props를 페이지에서 받아 사용한다. 위 메서드가 작동했을 땐 React 컴포넌트가 렌더링되지 않아 불가능한 문제였다.

 

https://nextjs.org/docs/pages/building-your-application/data-fetching#getserverprops-server-side-rendering

Building Your Application: Data Fetching | Next.js

 

결론

클라이언트 단인 커스텀 훅 내에서 데이터 패칭 메서드를 사용할 수 없다.

컴포넌트 렌더링 이전에 데이터 패칭 메서드가 실행된다.

 

논외

사실 데이터 패칭 내에서 react-query를 사용하여 api요청 대신 위 서드파티 라이브러리를 사용하려 했었다.

react-query는 프로미스를 반환하는 모든 콜백 함수에 대응해서 문제가 없을 줄 알았다.

queryClient를 사용해서 서버 사이드단에서 리액트 쿼리내 콜백함수로 위 서드파티 라이브러리를 요청했으나

undefined를 반환했고. 디버깅 결과 하이드레이션 과정에서 모종의 이유로 라이브러리가 작동하지 않았다.