2024. 03. 28 TIL - 트러블 슈팅

 

문제 상황

• 웹 페이지를 클라이언트 컴포넌트로 구성하고, useSearchParams 훅을 사용해 쿼리스트링 값을 받아 서버 컴포넌트에 props로 내려주려 함.
• 서버 컴포넌트에서 이 props를 사용해 데이터를 fetch하려 했으나, 클라이언트 컴포넌트에 서버 컴포넌트를 임포트하면 서버 컴포넌트도 클라이언트 컴포넌트가 되버려서 서버 컴포넌트의 로직이 정상적으로 실행되지 않음.
• 페이지를 서버 컴포넌트로 설정하는 것이 맞다고 판단됨.
• 그럼 어떻게 서버 컴포넌트에서 쿼리스트링 값을 어떻게 가져오지?

해결 방법

• useSearchParams 훅 등을 사용하지 않고, 페이지에서 쿼리스트링 값을 직접 함수의 props로 받는 방식으로 문제를 해결할 수 있었다.
•  

export default async function ReservePage({ searchParams }: { searchParams: { classId: string } }) {
  const classId = searchParams.classId;
  const classInfo = await fetchClassInfo({ classId });

  return (
    <div className="w-full h-full">
      <h1 className="text-xl">예약하기</h1>
      <ClassInfo classInfo={classInfo} classId={classId} />
      // ... 중략
    </div>
  );
}