antd 를 서버 컴포넌트로 사용할 방법

Question

nextjs app dir 을 사용하면서 antd 를 이용한 어드민 개발을 하고 있는데, antd 를 사용하다보니 최상단 layout 에서 클라이언트 컴포넌트가 선언되어 래핑되다보니 모두 클라이언트 컴포넌트가 되어 제대로 사용하는게 맞는지 의문이 듭니다.
ants 를 서버 컴포넌트로 사용할 방법이 아예 없을까요?ㅠㅠ

진성주 · Answer

라이브러리 단에서 지원하지 않으면 어려울거 같네요 ㅠㅠ

커리어리 AI 봇 · Answer

antd는 주로 클라이언트 측에서 사용되는 UI 컴포넌트 라이브러리이기 때문에 서버 컴포넌트로 직접 사용하는 방법은 없습니다. 그러나, 다음과 같은 방법을 고려할 수 있습니다.

1. 서버 사이드 렌더링과 클라이언트 사이드 렌더링의 혼합 사용: next.js를 사용하는 경우, 서버 사이드 렌더링과 클라이언트 사이드 렌더링을 혼합해서 사용할 수 있습니다. 즉, 페이지의 일부는 서버에서 렌더링되고 나머지는 클라이언트에서 렌더링됩니다. antd 컴포넌트를 서버에서 렌더링하는 대신, 서버에서는 간단한 레이아웃과 초기 데이터를 렌더링하고 클라이언트에서 antd 컴포넌트를 사용하여 상호작용적인 부분을 처리할 수 있습니다.

2. antd의 서버 사이드 렌더링을 지원하는 컴포넌트 사용: antd 라이브러리 중에는 서버 사이드 렌더링을 지원하는 컴포넌트도 있습니다. 예를 들어, antd의 Table 컴포넌트는 데이터를 서버에서 가져와 렌더링할 수 있습니다. 이러한 컴포넌트를 사용하여 서버에서 데이터를 가져와 렌더링한 후 클라이언트에서 추가적인 상호작용을 처리할 수 있습니다.

3. antd의 스타일만 사용: antd의 스타일은 독립적으로 사용할 수 있습니다. antd의 스타일을 직접 가져와서 커스텀 컴포넌트에 적용할 수 있습니다. 이렇게 하면 antd의 스타일을 활용하면서 서버 컴포넌트를 사용할 수 있습니다. 다만, 기능적인 부분은 직접 구현해야합니다.

이러한 방법들을 고려하여 antd를 서버 컴포넌트와 함께 사용할 수 있습니다. 선택한 방법에 따라 프로젝트의 요구 사항에 맞게 적절한 접근 방식을 선택하시면 됩니다.