[React]server component

react에서, 2020년 12월에 server component를 소개했다

 

그 후 next.js에서 server component를 적극 도입 & 확장했다

이에 따라 next.js에서는 client component와 server component, 2가지 형식으로 사용할 수 있다

 

하지만 client component는 알고 있었지만 server component는 언제 사용해야할지 몰랐다

---

Before Server component...

먼저 서버 컴포넌트가 있기전,

 

react의 컴포넌트가 브라우저에서 어떻게 렌더링 되는지 한번 알아보자

1. React문법으로 코드작성
2. babel을 만나 vanilla js 코드로 변환
3. js기반 element로 변환(vitual dom)
4. 현재 dom과 vitual dom을 비교
5. 비교 후 ui 업데이트

위와 같은 방법으로 react에서의 컴포넌트 렌더링의 과정이다

 

저런 방법들이 오로직 클라이언트에서만 작동이 됐다는 말이다.

따라서 클라이언트에 부담은 늘어가고, 성능은 저하되었다

 

또한 client component의 고질적인 문제점인 초기로딩속도, 비효율적인 fetch과정도 있었다.

Server component

server component는 말 그대로 서버에서 동작하는 컴포넌트이다.

특징

next.js프로젝트를 생성하면 /app안에 컴포넌트들은 기본적으로 server component 상태가 된다

 

server component는 서버에서 동작하기 때문에 브라우저의 코드나, api는 사용할 수 없다.

ex) React hook(useState, useEffect)

 

reat-hook(useState, useEffect)은 브라우저 환경에서 클라이언트의 state와 인터렉션을 관리한다

브라우저 api는 웹 브라우저가 제공하는 내장 기능으로, 웹 애플리케이션이 브라우저와 상호작용할 수 있도록 한다

 

그런데 server component는 Node.js 서버에서 작동한다

 

브라우저에서 클라이언트와 상호작용하도록 작동하는 기능들이니
서버에서 작동하는 react-hook이나 브라우저 api는 작동하지 않는다

장점

server component는 서버에서 렌더링이 된다.

 

그러므로 데이터 fetch 역시 서버에서 수행한다.

//server component
클라이언트 요청 → 서버에서 fetch 실행 → 데이터를 포함한 HTML 생성 → 
클라이언트에 완전한 HTML 전송 → 화면 렌더링 완료

//client component
클라이언트 요청 → 초기 HTML 전송 (데이터 없음) → 클라이언트에서 fetch 실행 → 
API 응답 후 상태 업데이트 → 화면 다시 렌더링

위에서 설명했던 client component의 문제점인 비효율적인 fetch방법을 해결할 수 있다

 

서버에서 정보를 가져와 html을 생성해서 클라이언트로 보내주기 때문에

SEO최적화와 초기로딩속도 개선의 이점도 있다

 

또한 apikey 나 토큰과 같은 정보를

클라이언트에서 전혀 표시하지 않고 안전하게 관리할 수 있다

 

이건 내가 작성한 서버컴포넌튼데

type UserData = {
  id: number;
  name: string;
  username: string;
  email: string;
  phone: string;
  website: string;
};

async function GetData() {
  const response = await fetch("https://jsonplaceholder.typicode.com/users");
  return response.json();
}

export default async function User() {
  const UserInfo = await GetData();

  return (
    <>
      {UserInfo.map((x: UserData, index: number) => {
        return (
          <div key={index}>
            <ul>
              <li>{x.id}</li>
              <li>{x.name}</li>
              <li>{x.username}</li>
              <li>{x.email}</li>
              <li>{x.phone}</li>
              <li>{x.webwite}</li>
            </ul>
          </div>
        );
      })}
    </>
  );
}

간단하게 데이터 가져와서

 

실행을 해본다면

이런식으로 fetch 요청은 보이지 않는다

작동방식

그럼 이제 server component의 작동방식을 알아보겠다

 

기본적인 작동방식은 client component와 비슷하다만 차이는 분명하다

1. 서버에서 컴포넌트 실행
2. HTML과 payload생성
3. 클라이언트에서 조립 & 표시
4. 먼저 서버에서 컴포넌트를 실행한다

이과정에서 fetch등 서버에 요청을 보내고 받는다

 

그다음에 html을 생성하고 payload를 생성하는데

payload란 json형태의 데이터 덩어리라고 생각하면 된다

<p>서버 컴포넌트는 진짜 ㄹㅈㄷ</p>

//payload
{
  "children": [
    {
      "type": "p",
      "props": {
        "children": "서버 컴포넌트는 진짜 ㄹㅈㄷ"
      }
    }
  ]
}

위와 같이 변환된다

그다음에 브라우저로 보내서 조립하고 화면에 표시한다

SSR과 차이점

서버에서 렌더링 하고 클라이언트에 보낸다는 점에서 SSR과 공통인 부분이 존재한다

 

하지만 작동방식에서 차이점이 드러난다

여기 이해를 돕기 위해 각각의 컴포넌트를 반환하는 api 5개가 있다

• header - 100ms
• footer- 1200ms
• side - 234ms
• banner - 500ms
• main - 4500ms

왼쪽은 이름, 오른쪽은 준비 시간이다

in SSR

먼저 준비된 header은 화면에 렌더링이 되고 싶지만 아직 나머지 ui들이 끝나지 않아 렌더링 될 수 없다

결국 header포함, 나머지 셋은 가장 시간이 많이 걸리는 main이 준비될 때까지 기다려야 비로소 화면에 렌더링 될 수 있다

in Server component

여기서도 header는 먼저 준비가 된다

하지만 SSR과 다르게 아직 2번째로 준비가 빠른 side가 준비되기도 전에 화면에는 header이 렌더링이 된다

 

1500ms가 지났을 무렵

화면에는 header, side, banner, footer가 렌더링 되어 사용자는 해당 기능을 볼 수 있지만

준비에 4500ms가 걸리는 main은 아직 준비 중이라 렌더링이 되지 않아 main이 있을 곳에는

 

Loading.....이라는 표시만 렌더링 된다

위 예시처럼 server component에서는 먼저 준비가 될수록 먼저 렌더링이 되어 렌더링 시간을 개선한다

사용해야 할 때

저렇게 장점이 많은 server component이지만 client component와 적절히 조절하여 사용하면 좋다

 

나의 생각을 말해보자면

server component는 data를 fetch 할 때나, 별도의 보안이 필요할 때,

client component는 상호작용하는 ui나 실시간 데이터를 표시할 때 사용

참고 & 출처

React 서버 컴포넌트 작동원리를 아주 쉽게 알아보자
[Nextjs] Server Component (서버 컴포넌트)
(Web) 페이로드(payload)란?