Nextjs App router 동작 방식이 이해가 안됩니다.

Question

https://nextjs.org/docs/app/building-your-application/rendering/client-components

// 문서내용
Defining multiple use client entry points:

You can define multiple use client entry points in your React Component tree. This allows you to split your application into multiple client bundles (or branches).

However, use client doesnt need to be defined in every component that needs to be rendered on the client. Once you define the boundary, all child components and modules imported into it are considered part of the client bundle.

=> 클라이언트 컴포넌트의 하위 컴포넌트들은 자동으로 전부 클라이언트 컴포넌트가 됨(use-client 명시할 필요X) 으로 이해했습니다.

그런데 첨부한 코드의 동작방식이 이해가 안됩니다.

예상
1. TestComponent가 클라이언트 컴포넌트(CSR)이므로 내부에 있는 HotEventList도 클라이언트 단에서동작할 것이다.
2. TestComponent를 ‘use client’로 클라이언트 컴포넌트로 만들었다. HotEventList에서는  useState등 CSR에 필요한 요소를 추가하더라도 ‘use client’를 추가할필요가 없다. TestComponent하위에 있어서 자동으로 클라이언트 컴포넌트가 되기 때문이다.

실제
1. HotEventList는 여전히 SSR로 동작한다.
2. HotEventList에 state를 추가하면 ‘use client’를 명시하라는 에러가 발생한다.

제가 어떤 부분을 잘못 이해하고 있는걸까요?

문정동개발자 · Accepted Answer

https://nextjs.org/docs/app/building-your-application/rendering/composition-patterns 이쪽을 보시면 자세한 설명이 나옵니다. 이런식으로 children으로 넘겨주게되면 부모가 client component여도 ssr이 기본이 되고, const TestComponent = ({ children }: { children: React.ReactNode }) => { console.log(TestComponent); return

; }; 이런식으로 children으로 받지않고 직접 작성하게되면 그 순간부터 HotEventList 컴포넌트는 use client 를 명시적으로 작성하지 않았다고 하더라도 client component로 자동으로 변환됩니다.