RSC와 RCC가 포함된 barrel file이라면, RSC도 RCC화된다.

1️⃣ 문제 발생

RSC인 컴포넌트에서 next/headers의 cookies를 import 하여 사용했더니 에러가 발생했습니다.

Error: 
  × You're importing a component that needs next/headers. That only works in a Server Component but one of its parents is marked with "use client", so it's a Client Component.
  │ Learn more: https://nextjs.org/docs/getting-started/react-essentials
  │ 
  │ 
   ╭─[/Users/jiwooning/Desktop/.../src/app/.../components/list-banner.tsx:1:1]
 1 │ import { cookies } from 'next/headers';

list-banner는 RSC 환경이었고, parent component 또한 RSC였기에 무엇이 에러 포인트인지 헤매게 되었습니다.

당시 프로젝트 구조를 간략히 보여드리자면 아래와 같습니다.

list page는 상단 컨텐츠와 하단 콘텐츠로 나눠집니다.

banner는 상단, container는 하단을 담당하고 있는데요.

에러의 내용을 보면 상위 컴포넌트가 ‘use client’로 선언되었기 때문에

next/headers를 사용할 수 없다고 설명하고 있습니다.

 

2️⃣ 에러 포인트

list-banner.tsx와 list-container 하위 컴포넌트인 card.tsx를 barrel file인

index.ts에 export문을 묶어주고 있었던 것이 문제였습니다.

// index.ts
export { default as ListCard } from './list-card'; // RCC
export { default as ListBanner } from './list-banner'; // RSC

 

console로 테스트 시, ListBanner 모듈 자체는 클라이언트에서 import되지만

실제 컴포넌트(함수)는 서버에서만 실행되는걸 확인했는데요.

barrel file로 컴포넌트들을 재익스포트할 때, 모든 컴포넌트들이 하나로 번들링되어 처리되므로

클라이언트 컴포넌트에서 서버 컴포넌트인 ListBanner가 사용되는 것으로 추정되었습니다.

 

확실한 것은 서버 컴포넌트와 클라이언트 컴포넌트가 섞여있을 때가 문제 발생 원인이라는 점이네요!

 

3️⃣ 해결 방법 & 배운 점

서버 컴포넌트와 클라이언트 컴포넌트의 barrel file을 개별 운영하는 것으로 해결하였습니다.

barrel file 사용 시 모든 컴포넌트가 하나의 의존성 그래프에 포함되며

서버/클라이언트 코드가 분리되어야 하는 RSC 아키텍처와 충돌할 수 있으므로

서로 간의 경계가 명확해야 한다는 점을 배우게 되었습니다.

 

번들링 되며 RCC화 될 것이라고는 예상하지 못해서 한참을 헤맸네요🥲