클라이언트 내부의 서버

Coddy React 여정의 Next.js 핵심 (Next.js Essentials) 섹션에 포함된 레슨 — 47개 중 21번째.

거의 모든 사람이 틀리는 규칙이 여기에 있으며, 이것이 서버를 얼마나 활용할 수 있는지를 결정하는 규칙입니다.

client 컴포넌트는 server 컴포넌트를 import할 수 없습니다: 이를 import하면 경계를 넘어 끌어오게 되어 이 역시 client 코드가 됩니다. 그래서 사람들은 인터랙티브 래퍼 내부에 있는 모든 것이 client 코드여야 한다고 결론을 내립니다. 그 결론은 틀렸습니다.

클라이언트 컴포넌트는 children으로 전달된 서버 콘텐츠를 렌더링할 수 있습니다.

차이점은 누가 렌더링을 수행하는가입니다. 서버 페이지가 다음과 같이 작성할 때:

<Panel>
    <Details />
</Panel>

…server가 <Details />를 렌더링하고 완성된 결과를 Panel에 prop으로 전달합니다. Panel은 이를 전혀 import하지도 않고, 실행하지도 않으며, 단지 어디에 둘지만 결정합니다. client 컴포넌트 입장에서는 children이 이미 완성된 UI 조각입니다.

이것이 소형 인터랙티브 셸(탭 스트립, 모달, 접히는 panel)이 서버 전용 콘텐츠를 브라우저로 가져오지 않고도 대량으로 감쌀 수 있게 해주는 원리입니다. 인터랙티브한 부분은 매우 작게 유지되고, 콘텐츠는 서버에 그대로 남아 있게 됩니다.

기억해야 할 구조: `client` 감싸기(wrappers), `server` 속채우기(fillings).

챌린지

중급

components/Panel.jsx는 client 컴포넌트입니다(잠금 상태, 읽기 전용): 이 컴포넌트는 toggle 버튼을 렌더링하고열려 있을 때만 해당 children을 표시합니다.

현재 페이지는 세부정보를 panel 내부가 아닌 옆에 렌더링하고 있어 toggle이 아무것도 제어하지 못합니다.

app/page.jsx에서 <p id="details">를 이동하여 <Panel> 태그 사이에 children으로 위치하도록 하세요.
텍스트를 정확히 있는 그대로 유지하고, app/page.jsx를 지시문 없이 server 컴포넌트로 두세요.

문단은 여전히 서버에서 렌더링됩니다. 클라이언트 panel은 이를 표시할지 여부만 결정합니다.

직접 해보기

import './globals.css';

export const metadata = {
    title: 'My App',
};

export default function RootLayout({ children }) {
    return (
        <html lang="en">
            <body>
                {children}
            </body>
        </html>
    );
}