Next.js는 컴포넌트 종류가 두 개 있다.

1. Server Component
2. Client Component

이와 같이 두개로 나뉜다.

먼저 만드는 방법에 대해 알아보자.

Server Component 만드는 법

Server Component의 경우, 우리가 리액트에서 만드는 것처럼 똑같이 컴포넌트 만들면 된다.

예시를 하나 보자.

const CartItem = () =>{

  return(
  <>
    <div className="cart-item">
        <p>상품명</p>
        <p>$40</p>
        <p>1개</p>
      </div>
  </>
  )
}
export default CartItem;

위와 같이 CartItem이라는 컴포넌트를 만들어서 export default를 통해 밖에서 import 시켜와서 사용할 수 있게 구성한다. 우리가 보통 리액트에서 이런식으로 만드는데, 이 방법이 Server Component 방식이다.

Client Component 만드는 법

Client Component의 경우는 Next.js 에서 사용하는 방법은 간단하다. 위의 한줄만 추가하면 된다.

'use client'

이 코드만 추가하면 알아서 Client Component가 완성이 된다.

'use client'

export default function Cart() {
  return (
    <div>
      <h4 className="title">Cart</h4>
     <CartItem/>
     <CartItem/>
     <CartItem/>
     {age}
    </div>
  )
} 

const CartItem = () =>{
  return(
  <>
    <div className="cart-item">
        <p>상품명</p>
        <p>$40</p>
        <p>1개</p>
      </div>
  </>
  )
}

이런식으로 있다고 가정해보자. 위와 같이 컴포넌트 두 개를 만들었다. 그리고 위의 Client Component이기 위함의 코드를 한 줄 추가한다. 그렇다면 어떤 것이 Client Component가 될까?

가장 가까이 있는 Cart 컴포넌트? 아니면 마지막에 있는 CartItem 컴포넌트?

정답은 이 파일안에 있는 컴포넌트 전부, 즉 2개 다 Client Component가 된다.

두 컴포넌트의 차이점

컴포넌트 두개 각각 만드는 법은 별로 어렵지 없구나! ok 그렇다면 두개의 차이점이 뭔데?
라고 무조건 생각이 들것이고, 이 점이 중요하다.

우선 기능적인 면부터 보자

기능적인 차이점

가장 큰 차이점은 HTML에 자바스크립트 기능을 넣을 수가 없다. 예시를 들어보자.

'use client'

export default function Cart() {
  return (
    <div>
      <h4 onClick={()=>{}} className="title">Cart</h4>
     <CartItem/>
     <CartItem/>
     <CartItem/>
     {age}
    </div>
  )
} 


const CartItem = () =>{

  return(
  <>
    <div className="cart-item">
        <p>상품명</p>
        <p>$40</p>
        <p>1개</p>
      </div>
  </>
  )
}

이런식의 Client Component 는 h4 태그에 자바스크립트 함수를 넣을 수 있다. 하지만 위의 'use client' 를 빼면 위의 코드가 에러가 발생한다.

또한 이 뿐 아니라 useState, useEffect 등 모두 불가능하다. 컴포넌트를 동적으로 바꾸는 기능은 모두 불가능하다.

쉽게 말하면 Server Component 는 페이지를 동적으로 바꿀 수 없다. 고정된 형태의 컴포넌트가 된다.

반대로 Client Component 는 동적인 형태가 가능하다.

개념적인 차이점

Next.js에 가장 큰 장점이 가지는 부분이 SSR이 가능하다는 점이라고 했다.
기존 우리가 쓰던 React에선 페이지를 렌더링 하는 주 방식으 Client에게 있었다. CSR의 방식인 점이다.

그러나 Next.js를 사용하기 시작하면서부터 클라이언트 또는 서버에서 선택하여 컴포넌트 단위를 렌더링 할 수 있게 됐다.

그렇다면 두개의 차이점, 클라이언트를 선택하는 것과 서버를 선택하는게 무엇이 다르길래 이렇게 나누는걸까?

Server Component와 Client Component 개념

Server Component 는 서버측에서 실행되는 컴포넌트이다.

이는 서버 측에서 미리 JS코드를 가져와서 HTML 코드를 만든 다음에 클라이언트로 보내주는 형태이다. 그러면 무슨 장점이 있을까?

당연히 페이지 로딩이 빠르게 된다. 또한 구글링 검색 노출에 유리할 것이다.

Client Component 는 클라이언트 측에서 실행되는 컴포넌트이다.
이 컴포넌트는 브라우저에서 실행되는 JavaScript 코드로 실행되며, 서버에서 렌더링된 HTML을 받아와서 동적으로 처리하고 상호 작용한다.

한마디로, 이를 통해 동적인 자바스크립트 코드를 사용할 수 있다. 하지만 단점은 무엇이겠는가? 당연히 서버 컴포넌트보다 로딩시간은 오래걸릴 것이다.

두 컴포넌트를 이용한 개발 방법

위를 읽어보면 알겠지만, 사용자에게 빠른 페이지 로딩을 위해선 최대한 Server Component 를 시용하는 것이 좋다. 하지만 동적인 일을 해야하는 컴포넌트는 무조건 적으로 Client Component 를 사용해야 할 것이다.

이를 위해서 동적인 코드가 필요한 컴포넌트와 필요 없는 컴포넌트를 구분지어, Server Component 를 최대한 늘리는 것이 빠른 페이지 구성을 이뤄낼 수 있다.

다른 분이 추천해주시기론, 큰 틀은 Server Component 로 개발하고 안에 동적인 컴포넌트를 Client Component 로 구성하는 것이 좋다라고 말씀해주셨다. 이 부분을 참고해서 개발해도 좋을 것이다.

마무리

이번 블로깅에서 Next.js에서 지원하는 렌더링 방법(컴포넌트 개발 방식) 에 대해 개념과 방법에 대해 알아보았다. Next.js의 가장 큰 장점이라고 할 수 있는 점이 이러한 컴포넌트 생성 방식이라고 생각이 든다.

개발을 할 때, Server Component, Client Component 두개의 구분을 잘 지어 개발하는 것이 필요가 된다고 생각한다.

물론 모든 컴포넌트를 Client Component 로 개발한다면 편하기야 하겠지만, 사용자들의 편의와 서비스의 완성도를 위해서라도 이러한 개발이 필요로 되어진다고 생각한다.