Next.js 13 서버 컴포넌트 조건부 렌더링

Question

안녕하세요.
개인프로젝트로 SEO가 중요한 웹 애플리케이션을 만들고 있어서 Next.js 13을 배워 사용중입니다.
프로젝트를 진행하다보니 막막한 구간에 들어섰습니다.

조건부 렌더링으로 사용자의 조작에 따라서 각각 다른 컴포넌트들을 렌더링하려고
페이지 루트 컴포넌트에 useState()를 사용했습니다.
그리고 그러다보니 루트 컴포넌트에 use client를 선언하게 되었고
루트 컴포넌트는 자연스럽게 클라이언트 컴포넌트가 되었습니다.

그런데 여기서 의문이 들었습니다.
next 13 공식문서에서는 컴포넌트를 클라이언트 컴포넌트로 만들면
모든 하위 컴포넌트들이 클라이언트 컴포넌트가 되기 때문에 SEO에 취약해질수있다.
그러니 되도록이면 서버 컴포넌트를 상위에 배치시키고
클라이언트 컴포넌트는 하위 컴포넌트로 배치하는게 좋다.

이렇게 나와있는데
조건부 렌더링 기능을 넣자니 클라이언트 컴포넌트로 만들어야되서 SEO가 취약해지고,
조건부 렌더링을 빼자니 프로젝트가 너무 밋밋해지고..
되도록이면 루트컴포넌트는 서버컴포넌트를 유지하면서
조건부 렌더링 기능을 넣고싶은데 막막하네요..

혹시 서버컴포넌트에서 조건부 렌더링을 할수있는 방법이 있을까요?
현업에서는 이런상황일때 어떻게 하시나요?

최경훈 · Answer

정확한 상황이 파악이 안되서 정확한 답변을 드리기가 어려운데요.

크게 route를 아에 두가지로 빼버리거나
아니면 넣기 애매한 기능은 그냥 vanilla js로 직접 작성할것 같습니다.

jaERyUN · Answer

use client 를 페이지나 layout에서 선언하지말고 Component에서 사용하세요

M_M · Answer

알고계신대로 서버 컴포넌트일때는 리액트 훅을 사용할 수 없습니다. 
대신 훅을 제외한 다른건 사용할수 있어요. 저의 경우 mobx를 사용중인데 mobx의 status로 상태를 관리하고 있습니다. 
mobx뿐만아니라 다른 상태관리라이브러리로도 조건부 렌더링을 구현할수 있습니다. 
정답은 없다고 생각합니다. 꼭 상태관리라이브러리가 아니여도 param이나 다양한 방법들이 있으니 재밌는 아이디어로 구현해보시면 좋은경험이 될거같아요!