인프런 커뮤니티 질문&답변

안녕하세요 kimgni.dev님, 질문해 주셔서 감사합니다!! 오류가 발생하는 코드를 보내주시면 면밀히 검토가 가능할 것 같습니다!! 일반적으로 클라이언트 컴포넌트가 서버 컴포넌트로 렌더링되는 이유는 다음과 같습니다.

1. 잘못된 컴포넌트 구성: 컴포넌트가 클라이언트 사이드 전용으로 올바르게 설정되지 않았을 수 있습니다. 예를 들어, Next.js의 dynamic() 함수를 사용하여 컴포넌트를 불러올 때 { ssr: false } 옵션이 포함되어 있는지 확인하세요.

2. 외부 데이터 의존성: 컴포넌트가 서버 사이드에서 필요한 외부 데이터에 의존하고 있을 수 있습니다. 이 경우, 컴포넌트는 클라이언트 사이드에서 렌더링되기 전에 서버 사이드에서 먼저 렌더링될 수 있습니다.

3. 부모 컴포넌트의 영향: 부모 컴포넌트가 서버 사이드 렌더링을 사용하고 있다면, 자식 컴포넌트 역시 영향을 받을 수 있습니다. 컴포넌트 트리 전체를 확인하여 어느 부분에서 SSR이 발생하는지 파악해야 합니다.

4. 서버 사이드 로직: 컴포넌트 내부나 관련 모듈에서 서버 사이드에서만 실행되는 코드가 있는지 확인하세요. 예를 들어, window나 document와 같은 브라우저 전용 객체에 접근하는 경우, 이러한 코드는 클라이언트 사이드에서만 실행되어야 합니다.

5. 빌드 및 배포 설정: 프로젝트의 빌드 및 배포 설정에서 문제가 발생했을 수도 있습니다. Next.js의 설정 파일(`next.config.js`)과 배포 환경을 점검하세요.

감사합니다! 오늘도 좋은 하루 보내세요😸😸