[Next TIL] 서버 컨포넌트

😎 RSC(React Server Component) vs RCC(React Client Component)

• RSC란 서버에서 동작하는 컴포넌트를 말한다. 서버 컴포넌트는 서버에서 한차례 해석된 이후 클라이언트에 전달된다.
• RCC란 클라이언트에서 동작하는 컴포넌트를 말한다.클라이언트 컴포넌트는 클라이언트가 js 번들(js 파일 묶음)을 다운받은 후 해석하게 된다.

➡️ RSC의 장점

• 클라이언트로 내려보내는 js 번들 크기를 줄일 수 있다.

• 데이터 베이스와 보다 가까운 곳에서 데이터를 조회하기 때문에 속도가 더 빨라진다.

➡️ 서버 사이드와 클라이언트 컴포넌트 사용경우 구분

• Next.js는 RSC를 기본 컴포넌트 렌더링 방식으로 채택하고 있다.

• 하지만 브라우저 API를 사용하거나 useState, useEffect 등의 훅을 이용해야하는 경우에는 여전히 클라이언트 컴포넌트를 사용해야 한다.

• 클라우드 컴포넌트를 사용할 때는 파일 가장 첫 줄에 use client라고 명시하면 됩니다.

'use client'
 
import { useState } from 'react'
 
export default function Counter() {
  const [count, setCount] = useState(0)
 
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  )
}