Next.js 13 서버 컴포넌트 조건부 렌더링
안녕하세요. 개인프로젝트로 SEO가 중요한 웹 애플리케이션을 만들고 있어서 Next.js 13을 배워 사용중입니다. 프로젝트를 진행하다보니 막막한 구간에 들어섰습니다. 조건부 렌더링으로 사용자의 조작에 따라서 각각 다른 컴포넌트들을 렌더링하려고 페이지 루트 컴포넌트에 useState()를 사용했습니다. 그리고 그러다보니 루트 컴포넌트에 'use client'를 선언하게 되었고 루트 컴포넌트는 자연스럽게 클라이언트 컴포넌트가 되었습니다. 그런데 여기서 의문이 들었습니다. next 13 공식문서에서는 컴포넌트를 클라이언트 컴포넌트로 만들면 모든 하위 컴포넌트들이 클라이언트 컴포넌트가 되기 때문에 SEO에 취약해질수있다. 그러니 되도록이면 서버 컴포넌트를 상위에 배치시키고 클라이언트 컴포넌트는 하위 컴포넌트로 배치하는게 좋다. 이렇게 나와있는데 조건부 렌더링 기능을 넣자니 클라이언트 컴포넌트로 만들어야되서 SEO가 취약해지고, 조건부 렌더링을 빼자니 프로젝트가 너무 밋밋해지고.. 되도록이면 루트컴포넌트는 서버컴포넌트를 유지하면서 조건부 렌더링 기능을 넣고싶은데 막막하네요.. 혹시 서버컴포넌트에서 조건부 렌더링을 할수있는 방법이 있을까요? 현업에서는 이런상황일때 어떻게 하시나요?
Loading...