[Next.js] Server Component와 Client Component에 대해 알아보자

 

Next.js는 Server Component와 Client Component를 개발자가 선택하고 정의하여 사용할 수 있다.

(기본적으로 모든 컴포넌트는 Server Component이고, "use client"를 통해 Client Component로 정의할 수 있다.)

 

 

React 18 이전의 렌더링

React는 Client Side Rendering을 하기 때문에, 모든 컴포넌트의 렌더링은 클라이언트(브라우저)에서 이루어졌다.

 

서버가 클라이언트(브라우저)에 React에서 작성한 JavaScript 파일을 넘겨주면, 브라우저는 해당 파일을 해석하여 최소한의 초기 리소스에서 상호작용을 통해 JavaScript를 실행하면서 동적으로 화면을 생성해갔다.

 

하지만 초기 로딩 속도가 느리고, 검색 엔진 최적화가 되지않는 단점이 있어 Server Side Rendering의 필요성이 대두되었다.

 

그렇게 Next.js가 등장하면서 SSR을 쉽게 구현할 수 있게 되었다.

Server Side Rendering은 웹 페이지의 콘텐츠를 먼저 서버에서 렌더링하여 완성된 HTML을 클라이언트(브라우저)에 전달하는 방식으로, 후에 React가 실행되어 JavaScript 코드들이 붙는 hydration 과정을 수행한다.

 

하지만 이 때에도 CSR이 기본이어서 SSR을 적용하려면, getServersideProps 등의 추가적인 설정이 필요했다.

 

 

React 18 이후의 렌더링

React 18부터 Server Component가 등장하였고, (이전엔 모든 컴포넌트는 Client Component) Next.js 13에서 두 가지 컴포넌트를 생성할 수 있게 되었다.

 

• Server Component
  • 서버에서 HTML을 렌더링하여 클라이언트(브라우저)에 전송된다. (클라이언트에서 실행 X)
  • hydration 과정이 없다. 순수하게 HTML을 생성하는 역할을 한다.

• Client Component
  • 클라이언트 측에서 JavaScript로 실행되어 렌더링된다.
  • hydration이 브라우저에서 이루어진다.
  • 사용자와 상호작용하는 인터랙티브한 UI들을 정의할 때 사용한다.

 

 

RSC와 RCC 정의 및 사용 방법

Server Component

export default async function Home() {
  const res = await fetch("https://jsonplaceholder.typicode.com/todos/1");
  const data = await res.json();

  return (
    <main>
      <h1>Home</h1>
      <p>{data.title}</p>
    </main>
  );
}
출처: https://curryyou.tistory.com/539 [카레유:티스토리]

Client Component

"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((prev) => prev + 1)}>Click me</button>
    </div>
  );
}
출처: https://curryyou.tistory.com/539 [카레유:티스토리]

 

 

 

언제 사용해야 할까?

 

이와 같이 서버 컴포넌트가 더 낫다, 클라이언트 컴포넌트가 더 낫다의 문제가 아닌

둘을 개발자가 잘 혼합하여 사용하고 효율적인 애플리케이션을 구축하면 된다.

서버 컴포넌트는 데이터 처리와 같은 무거운 작업을 담당하고, 클라이언트 컴포넌트는 사용자 인터랙션과 동적인 기능을 담당할 수 있기 때문이다.

 

따라서 이러한 분업을 통해 클라이언트의 부담을 줄이고 애플리케이션의 성능과 사용자 경험을 동시에 향상시킬 수 있다.

 

 

 

 

참고

https://f-lab.kr/insight/understanding-nextjs-and-server-components

Next.js와 서버 컴포넌트의 이해와 활용

https://velog.io/@tnrud4685/Next.js-13%EB%B2%84%EC%A0%84

[Next.js 13] Server Component 란? (feat.use client)

https://curryyou.tistory.com/539

[Next.js 13] Server Component vs. Client Component 기본 및 사용 방법