✨[Feat] SSR(서버 사이드 렌더링) 방식으로 초기 데이터를 가져오기 #308

[wynter24]

#️⃣연관된 이슈

#308, #306, #330, #331

📝작업 내용

• SSR 방식으로 초기 데이터를 가져오는 로직 uitl 생성 및 적용(fetchBookClubs)
  *적용된 곳: src/app/page.tsx, src/app/bookclub/page.tsx
• fetchBookClubs 테스트 코드 작성
• useBookClubList 테스트 코드 작성
  *useBookClubList: 쿼리키를 사용하여 데이터를 가져오는 훅
• 🐛 [Bug] 빌드 환경에서 환경변수 process.env.NEXT_PUBLIC_API_URL이 undefined로 평가되는 문제 해결 #331

미리보기, 사용방법

Hydration API를 활용하여 SSR 데이터 Prefetching

서버 컴포넌트에서 데이터를 prefetch한 후 Hydration API를 활용합니다.

prefetching 단계

1. 서버 컴포넌트에서 queryClient.prefetchQuery를 사용해 데이터를 불러오고, 이를 dehydrate하여 HydrationBoundary 내부 state로 전달합니다.
2. 데이터를 사용하는 클라이언트 컴포넌트에서 useQuery로 동일한 데이터를 불러오면, 해당 데이터는 prefetch된 상태로 적용됩니다.

코드 구현

1. 서버 컴포넌트에서 prefetching 적용

export default async function Home() {
  const queryClient = new QueryClient();

  await queryClient.prefetchQuery({
    queryKey: ['bookClubs', 'list', DEFAULT_FILTERS],
    queryFn: () => fetchBookClubs(DEFAULT_FILTERS),
  });

  return (
    <HydrationBoundary state={dehydrate(queryClient)}>
      <BookClubMainPage />
    </HydrationBoundary>
  );
}

2. 클라이언트 컴포넌트에서 useQuery 적용

function BookClubMainPage() {
  const { filters, updateFilters } = useBookClubList();
  const { data, isLoading, isFetching } = useQuery({
    queryKey: ['bookClubs', 'list', filters],
    queryFn: () => fetchBookClubs(filters),
  });

  return (
    <>
      <HeaderSection title={`반가워요, ${userName}님! 책 모임에 참여해 보세요`} />
      <FilterBar filters={filters} handleFilterChange={updateFilters} />
      {isLoading || isFetching ? <Loading /> : <ClubListSection bookClubs={data} filter={filters} />}
    </>
  );
}

export default BookClubMainPage;

기타 참고사항

• 초기 데이터 size=100으로 설정
  현재 무한 스크롤 부재로 default로 설정된 size = 10을 100으로 설정하여 모든 모임을 조회할 수 있도록 구현했습니다.
• useBookClubList 테스트: API 호출 모킹하기 위해 jest.config.js에 아래 설정을 추가하였습니다.

const config = {
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/src/$1',
  },
};
// ^@/(.*)$: @/로 시작하는 경로를 캡처하고, 뒤의 모든 문자열을 그룹화.
// <rootDir>/src/$1: Jest의 프로젝트 루트를 기준으로 src/ 디렉토리 아래의 파일로 매핑.

[cloud0406]

고생하셨습니다~.~

[sunnwave]

수고하셨습니당~ㅎㅅㅎ