Server Component vs Client Component

hyeryeon·2024년 6월 17일

🎆 Server Component

서버에서 HTML을 렌더링하여 브라우저에 응답한다.
Hydration 과정은 없다.

🎆 Client Component

서버에서 기본적인 HTML은 렌더딩하여 브라우저에 응답한다.
Hydration(JS Interactivity)만 브라우저에서 이루어진다.

기본적인 HTML자체는 모두 서버에서 렌더링된다.
단, Client Component의 경우에만 브라우저에서 Hydaration 과정이 진행된다.

Event Listener(클릭 이벤트 등), Browser API(web storage 등), React Hooks(useState, useEffect 등) 등은 브라우저에서만 작동하는 클라이언트 단 JS코드이며, 브라우저에서 Hydration 과정을 거치는 Client Component에서만 정의될 수 있다.

따라서, Server Component에서는 사용이 불가하다.

데이터 페치 관점에서 CSR과 SSR의 차이점

데이터 페칭을 하기 위해선
-> 데이터를 보여주는 클라이언트 사이드의 리액트 앱과 서버 사이드 REST API 앱이 필요

리액트에서 데이터를 페치하기 위해선

useEffect 훅, React-Query, SWR 등을 사용해 백엔드로 네트워크 요청
=> 데이터베이스에서 데이터를 집어 네트워크를 통해 전달

위는 클라이언트 사이드 렌더링 CSR 의 패턴이다.

클라이언트가 HTML 파일을 받는 시점에서 시작
이 파일은 어떤 컨텐츠도 포함하지 않으며, 하나 혹은 그 이상의 스크립트 태그를 갖는다.

-> 자바스크립트 다운로드되고 파싱 되면
-> 리액트 앱이 실행되고
-> 돔 노드를 생성해 UI를 채운다.

초기에는, 유저는 어떠한 실제 데이터도 갖지 못하고,

로딩 상태와 오직 앱의 쉘(레이아웃)만 렌더하는데

유저는 네트워크 요청이 완료될 때까지 로딩 상태를 보게 되고, 리렌더를 통해 로딩 UI(스피너, 스켈레톤 등)가 실제 컨텐츠로 대체된다.

위는 SSR을 사용한 페치 패턴

클라이언트 사이드와 다른 점은

초기 렌더를 서버에서 한다
=> 유저가 텅 빈 HTML을 받지 않는다는 것

초기에 서버에서 렌더 하게 되면, 좀 더 빠르게 쉘을 볼 수 있다.
유저는 텅 빈 페이지보다 상황이 진행된다고 느끼기에 -> 로딩 경험이 좀 더 빠르게 느껴질 수 있다.

하지만 위와 같은 흐름은 뭔가 이상함

클라이언트와 서버를 왕복하지 않고,
데이터베이스 쿼리를 초기에 서버에서 요청한다면
컨텐츠가 온전히 채워진 UI를 즉시 유저에게 보낼 수 있을 것인데...

이때, 리액트 서버 컴포넌트를 사용하면 이런 문제를 해결할 수 있다.

리액트 서버 컴포넌트

리액트 서버 컴포넌트를 사용하면

컴포넌트 내부에서 데이터 페치와 데이터베이스 쿼리를 할 수 있게 해준다.

데이터 페치 로직 자체를 서버로 옮길 수 있기에, 클라이언트에서는 데이터와 함께 구성된 컴포넌트를 받는다.

리액트 서버 컴포넌트를 사용하면 위와 같이 클라이언트와 서버 왕복 없이도 데이터의 흐름을 만들어냄
=> 유저는 로딩 UI 없이 바로 컨텐츠를 페이지에서 볼 수 있게 된당

Server Component와 Client Component 정의 방법 및 특징

📌 Server Component

Next.js에서는 /app 디렉터리 내부에 컴포넌트를 만들면, 디폴트로 Server Component가 된다.
따라서 Server Component로 만들기 위해 별도의 작업을 할 필요가 없다.

export default function Home(){
  return (
    <main>
      <h1>Home: Server Component</h1>
    </main>
  );
}

모든 컴포넌트는 Server Component가 디폴트.
서버 단에서 렌더링 되므로, 브라우저 환경의 코드는 사용 불가:

Event Listener(onClick 등) 사용 불가
React Hooks(useState 등) 사용 불가
Browser API(webStorage 등) 사용 불가

Server Component는 Client Compoent 포함 가능(반대는 불가)
Server Component는 async 함수로 정의 가능

따라서 컴포넌트 내부에서 바로 await fetch() 호출이 가능하다.

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>
  );
}

Server Component는 서버에서 렌더링 되므로, 아래와 같은 장점이 있다.

불필요한 dependency를 클라이언트에 전송할 필요가 없고,
Database 접근 및 fetch 속도가 개선될 수 있으며,
보안 정보도 좀더 안전하게 관리할 수 있다.

📌Client Component

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>
  );
}

컴포넌트 파일 최상단에 "use client"를 붙여주면 Client Component가 된다.
클라이언트(브라우저) 단에서 렌더링 되므로, 브라우저 환경의 코드 사용 가능:

Event Listener(onClick 등) 사용 가능
React Hooks(useState 등) 사용 가능
Browser API(webStorage 등) 사용 가능

Client Component에 내부에 포함되는 자식 컴포넌트들도 모두 자동으로 Client Component가 된다.
Client Componemt는 Server Component를 포함할 수 없다. (반대만 가능)

Server Component 와 Client Component의 사용 및 배치 방법

기본적으로 모든 컴포넌트를 Server Component로 만들고,
클라이언트 단의 유저 인터랙션 처리나 React hooks 사용이 필요할 때만 Client Component를 추가해주면 좋다.

1. Client Component 사용이 필요할 때:

인터랙티비티 및 Event Listener 사용이 필요할 때
React Hooks (useState, useEffect 등) 사용이 필요할 때
Browser 단의 API (web storage 등) 사용이 필요할 때

2. Server Component 사용이 필요할 때:

위의 Client Component 사용이 불가피한 경우를 제외한 모든 경우!

공식 문서에서는 특히 아래의 경우 Server Component를 사용할 것을 권고한다.

Fetch data
Access Backend Resources(directly)
Keep sensitive information on the server (access tokens, API keys, etc)
Keep large dependencies on the server / Reduce client-side JavaScript