● 왜 서버 컴포넌트를 사용해야하는가?
CSR같은 경우, 렌더링을 클라이언트 측에서 하기때문에 자바스크립트를 받아오는데 있어서, 시간이 오래걸릴 수 있다는 단점이 있지만, 서버 컴포넌트를 활용했을 시 번들의 크기도 줄어들 수 있고 더빠르게 렌더링할 수 있습니다. 기본적으로 'use client'를 작성하지 않으면 서버컴포넌트로 작성됩니다.
● 언제 서버컴포넌트를 사용해야하고, 클라이언트 컴포넌트를 사용해야하는가?
공식문서에서는 그냥 일반적으로 서버컴포넌트와 클라이언트 컴포넌트를 사용할지 고민하고 있다면, 대체적으로 서버컴포넌트를 쓰라고 권장하고 있습니다. (app 디렉토리를 사용했다는 가정하에,)
공식문서에서는 아래와 같이 언제 서버 컴포넌트를 써야하고 클라이언트 컴포넌트를 사용해야하는지 요약해두었는데요, 대체적으로 서버와 통신을 자주해야하거나, 서버쪽에 의존성을 많이 두고 싶다면 서버컴포넌트를 활용하고, 이외에 핸들러를 달거나 생명주기 관련된 hook, state를 사용한다면 클라이언트 컴포넌트를 사용하라고 되어있네요.
제가 생각했을 때는 서버컴포넌트를 기준으로 두고, onClick 같은 핸들러나 state가 쓰여야한다면 따로 컴포넌트로 빼서 클라이언트 컴포넌트로 사용하는게 좋을 것 같다는 생각이 들었습니다.
To improve the performance of your application, we recommend moving Client Components to the leaves of your component tree where possible.
실제로도 공식문서에서 제가 생각한 바와같이 활용하라고 제안하고 있네요.
● 서버컴포넌트와 클라이언트 컴포넌트의 구상 (어떻게 둘을 같이 그릴까?)
서버에서 React는 결과를 클라이언트로 보내기 전에 모든 서버 컴포넌트를 렌더링합니다. 여기에는 클라이언트 컴포넌트 안에 중첩된 서버 컴포넌트가 포함됩니다. 이 단계에서 발생하는 클라이언트 컴포넌트는 건너뜁니다. 클라이언트에서 React는 클라이언트 컴포넌트를 렌더링하고 서버 컴포넌트의 렌더링 결과를 슬롯에 삽입하여 서버와 클라이언트에서 수행한 작업을 병합합니다. 서버 컴포넌트가 클라이언트 컴포넌트 안에 중첩되어 있는 경우, 렌더링된 콘텐츠는 클라이언트 컴포넌트 안에 올바르게 배치됩니다.
* 클라이언트 컴포넌트 내에서 서버컴포넌트를 import 할 순 없다.
● 그래도 클라이언트 컴포넌트에서 서버컴포넌트를 꼭 불러오고 싶다면?
prop으로 받아라.. 즉, children으로 넣으로 공식문서에 예시가 있네요.
'use client'
import { useState } from 'react'
export default function ExampleClientComponent({
children,
}: {
children: React.ReactNode
}) {
const [count, setCount] = useState(0)
return (
<>
<button onClick={() => setCount(count + 1)}>{count}</button>
{children}
</>
)
}// This pattern works:
// You can pass a Server Component as a child or prop of a
// Client Component.
import ExampleClientComponent from './example-client-component'
import ExampleServerComponent from './example-server-component'
// Pages in Next.js are Server Components by default
export default function Page() {
return (
<ExampleClientComponent>
<ExampleServerComponent />
</ExampleClientComponent>
)
}
● 서버 컴포넌트에서 꼭 클라이언트 컴포넌트를 사용해야한다면? (useContext, createContext)
createContext나 useContext 즉, context와 관련된 Provider 컴포넌트는 서버 컴포넌트에서 사용할 수 없습니다. 하지만 우리는.. 꼭사용해야하잖아요? 따라서 공식문서에서 꼭 사용해야하는 클라이언트 컴포넌트에 대해서는 클라이언트 컴포넌트로 따로 빼서 wrap하라고 하네요.
아래는 서버컴포넌트에서 클라이언트 컴포넌트를 사용할 수 없는 상황입니다.
import { createContext } from 'react'
// createContext is not supported in Server Components
export const ThemeContext = createContext({})
export default function RootLayout({ children }) {
return (
<html>
<body>
<ThemeContext.Provider value="dark">{children}</ThemeContext.Provider>
</body>
</html>
)
}따라서 아래와 같이 prop으로 children을 받는 형식으로 클라이언트 컴포넌트로 감싸라고 하네요.
'use client'
import { createContext } from 'react'
export const ThemeContext = createContext({})
export default function ThemeProvider({ children }) {
return <ThemeContext.Provider value="dark">{children}</ThemeContext.Provider>
}그 이후 레이아웃 컴포넌트에서 아래와 같이 설정하라고 합니다.
import ThemeProvider from './theme-provider'
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html>
<body>
<ThemeProvider>{children}</ThemeProvider>
</body>
</html>
)
}
Getting Started: React Essentials | Next.js
To build applications with Next.js, it helps to be familiar with React's newer features such as Server Components. This page will go through the differences between Server and Client Components, when to use them, and recommended patterns. If you're new to
nextjs.org
