Next.js 13에서 스타일 컴포넌트 관련 질문이 있습니당

next 13부터는 컴포넌트별로 렌더링 방식이 달라짐으로 상위 컴포넌트에 의해서 모든 렌더링 방식이 통일 되는 것이 아닌 각 컴포넌트 별로 렌더링 방식이 달라집니다. 그러므로 하위 컴포넌트가 모두 클라이언트 컴포넌트가 되는 것은 아닙니다. 전역을 감싸는 레이아웃 방식이 클라이언트여야하는 것은 어쩔 수 없는 것으로 공식문서으로 보이며 그러한 방식이 신경 쓰인다면 서버컴포넌트에서 사용할 수 있는 테일윈드나 vanilla-extract을 사용하시거나 sass를 사용하면 될거 같습니다. https://beta.nextjs.org/docs/styling/css-in-js https://beta.nextjs.org/docs/styling/tailwind-css https://github.com/vanilla-extract-css/vanilla-extract/issues/929 https://beta.nextjs.org/docs/styling/sass

Next.js의 공식 문서에 따르면, 최적화된 성능을 위해서는 클라이언트 쪽에서 사용되는 컴포넌트는 최대한 리프 노드에 배치하는 것이 좋습니다. 이는 클라이언트 쪽에서 불필요한 리랜더링을 방지하고, 필요한 부분만 업데이트하면서 성능을 최적화할 수 있기 때문입니다. 하지만, root layout 컴포넌트가 모든 페이지에 사용되는 경우, 이는 예외적인 경우일 수 있습니다. 이 경우, 모든 페이지에서 공통으로 사용되는 layout 컴포넌트를 최상위 레벨에 배치하는 것이 일반적입니다. 따라서, root layout 컴포넌트를 최상위 레벨에 배치하는 것은 일반적인 경우이며, 이 경우에는 성능 문제가 발생하지 않습니다. 하지만, 모든 페이지에서 공통으로 사용되는 layout 컴포넌트가 아닌 경우에는 최대한 리프 노드에 배치하는 것이 좋습니다. 컴포넌트가 클라이언트 쪽에서 렌더링되면, 해당 컴포넌트가 자식으로 포함하는 모든 컴포넌트도 클라이언트 쪽에서 렌더링됩니다. 이러한 동작은 Next.js의 기본적인 동작입니다. 따라서, 클라이언트 쪽에서 렌더링되는 컴포넌트는 최대한 리프 노드에 배치하여 필요한 부분만 업데이트하도록 하는 것이 좋습니다.