렌더링 시, data 깜빡거림

회사에서는 Nextjs + Typescript를 사용하면서 GraphQl로 api 통신을 한다

사이드바의 데이터가 본문의 페이지가 바뀔 때마다 깜빡이는 현상이 있었다
사이드바는 다른 프로젝트로 이동하지 않는 이상, 고정된 데이터가 보여야 한다
이 현상을 해결하기 위해 우선 데이터를 어떻게 받아오는지 확인해봤다.

  const { userPermission, administrator } = useUserRole();
  const [getInfo] = useFindMyOneProjectLazyQuery({
    fetchPolicy: "no-cache",
  });
  // ...중략
  React.useEffect(() => {
    if (!projectId) return;
    getProjectInfo();
  }, [getProjectInfo, projectId]);

pages에서 SSR로 데이터를 받아오는 본문과 달리, 사이드바는 별도의 페이지가 없기 때문에 해당 컴포넌트에서 쿼리를 불러와서 보여주고 있었다

const projectInfo = useAppSelector((state) => state.project);

본문 pages에서 SSR로 받아오는 데이터를 하위 컴포넌트에서 RTK store에 저장하고 있었기 때문에 쿼리문을 다 지우고 useAppSelector를 불러주면 -끝-

페이지를 아무리 이동해도 사이드바의 데이터가 더 이상 깜빡이지 않는다

쿼리로 불러와서 state에 담아주고, useEffect를 사용해서 프로젝트 id가 바뀔 때마다 데이터를 불러와주던 약 28줄의 코드를 단 한 줄로 줄이게 됐다