[ 요즘IT ] 새로 등장한 '리액트 서버 컴포넌트' 이해하기

< 리액트 서버 컴포넌트 React Server Component >

들어가기 전에

클라이언트 사이드 렌더링 CSR 란？

서버 사이드 렌더링 SSR 란?

서버는 클라이언트 사이드 렌더링에서처럼 텅 빈 HTML 파일을 전송하는 대신, 직접 애플리케이션을 렌더링한 후 HTML을 생성해 냅니다. 결과적으로 사용자는

완전한 형식의 HTML 문서를 받게 된다.

따라서 서버가 자바스크립트 번들을 다운로드, 파싱하는 동안에도 사용자에게는 텅 빈 화면이 아니라 어느 정도 콘텐츠가 노출된다. 그런 다음 서버의 리액트가

중단한 부붙을 클라이언트 측의 리액트가 이어받아 DOM을 적용하고 상호작용성을 추가한다.

물론, 클라이언트 단에서도 실행해서 인터랙티브한 부분을 처리해야 하므로 HTML 파일에는 여전히 script 태그가 포함되기는 하지만, 브라우저

동작하는 방식에 차이가 있다. => DOM 노드를 하나하나 새로 만드는 대신 이미 만들어진 HTML 을 차용하는데, 하이드레이션이라고 한다.

리액트 팀의 핵심 멤버인 댄 아브라모브(Dan Abramov) 왈)

" 하이드레이션은 '건조한' HTML에 상호작용성Interactivity과 이벤트 핸들러라

는 '물'을 공급하는 것과 같습니다."

Data Fetching

리액트 서버 컴포넌트 소개

• 완전히 새로운 패러다임 => SSR을 대체할 순 없다.
• 서버에서만 실행되는 컴포넌트를 생성할 수 있다. 또, 리액트 컴포넌트 내에서 바로 데이터베이스 쿼리를 작성하는 것과 같은 작업을 할 수 있다. => 해당 코드는 JS번들에 포함되지 않으므로 하이드레이트 하거나 다시 렌더링하지 않는다.
• 페이지 인터렉티브(TTI) 지표를 개선하는 잠재력이 있다.

리액트 서버 컴포넌트 vs 서버 사이드 렌더링

• 리액트 서버 컴포넌트는 SSR의 버전 2.0 으로 생각하면 안된다. => 서로 보완
• 초기 HTML을 생성하기 위해서는 여전히 서버 사이드 렌더링에 의존해야 한다. 다만, 리액트 서버 컴포넌트는 특정 컴포넌트가 클라이언트 쪽 자바스크립트 번들에 포함되지 않게, 서버에서만 실행되도록 할 수 있다.
• 서버 사이드 렌더링 없이 서버 컴포넌트를 사용하는 것도 가능하지만, 함께 사용한다면 더 좋은 결과를 얻을 수 있다. 예시는 리액트 팀의 SSR이 없는 최소한의 RSC 데모

호환 환경

• 리액트 서버 컴포넌트는 번들러, 서버, 라우터 등 리액트 외부의 여러 가지 요소와 긴밀하게 통합되어야 한다.
• 현재 리액트 서버 컴포넌트를 사용할 수 있는 유일한 방법은 Next.js 13.4 이상에서 새롭게 재설계된 "앱 라우터"를 사용하는 것뿐이다.
• 글 원문)

클라이언트 컴포넌트 지정하기

리액트 서버 컴포넌트 패러다임에서는 기본적으로 모든 컴포넌트를 서버 컴포넌트라고 가정한다. 그렇기 때문에 클라이언트 컴포넌트를 사용하려면 지시문 "use
client"을 사용해야 한다.

어떤 것을 클라이언트 컴포넌트로 지정해야 할까? 서버,클라이언트 컴포넌트 구분하는 기준은?

• 일반적으로 서버 컴포넌트를 만들 수 있다면 그렇게 만들어야 한다. 더 간단하고, 이해하기 쉽고, 자바스크립트 번들에 코드가 포함되지 않아 성능 상의 이점 있다.
• 상태 변수나 이펙트를 사용하는 컴포넌트는 반드시 클라이언트에서 실행해야 한다, 나머지를 서버 컴포넌트로 남겨두면 된다.

경계 Boundaries

• 상위 구성 요소가 다시 렌더링되면 하위 컴포넌트들은 모두 다시 렌더링된다. => 클라이언트 컴포넌트가 임포트 하는 컴포넌트는 반드시 클라이언트 컴포넌트가 되어야 한다.(임포트하는 모듈도 전부 클라이언트 컴포넌트이어야 한다.) => 클라이언트와의 경계client boundaries
• 클라이언트 컴포넌트 하위에 있는 모든 컴포넌트가 암시적으로 클라이언트 컴포넌트로 변환된다.=> 명시적으로 "use client" 지시어가 없어도 클라이언트에서 하이드레이트/렌더링 된다.
• 부모/자식 관계는 중요하지 않다.
  • 예시
  • 설명 : ColorProvider는 관계상 Header, MainContent의 부모이지만, 실질적으로는 HomePage가 Header와 MainContent를 불러와 렌더링하기 때문에 Homepage가 컴포넌트들의 프로퍼티를 결정한다.

      function HomePage(){
          return (
              <ColorProvider> //use client
                    <Header/>
                    <MainContent/>
                </ColorProvider>
          ) 
      }

애플리케이션의 상위 컴포넌틑에서 상태를 사용해야 한다면 어떻게 해야 할까? 모두 클라이언트 컴포넌트가 되어야 하는걸까?

이 같은 경우에는 대부분 애플리케이션을 재구성하여 소유자가 변경되도록 하면 문제를 해결할 수 있다.

서버 컴포넌트에는 서버가 필요하지 않다.

• 렌더링 : - 정적: 배포 프로세스 중에 애플리케이션이 빌드될 때 HTML이 생성됨

     - 동적: 사용자가 페이지를 요청할 때'온디맨드(on-demand)'로 HTML이 생성됨

  • 서버 없이도 리액트 서버 컴포넌트를 사용할 수 있고, 여러개의 정적 HTML 파일을 생성하고 원하는 곳에 호스팅할 수 있다 => 온디맨드가 필수가 아니라면 모든 작업은 빌드 과정에서 미리 수행된다.

 

---

글 원문)

https://www.joshwcomeau.com/react/server-components/

Making Sense of React Server Components

글 번역문)

https://yozm.wishket.com/magazine/detail/2271/

새로 등장한 ‘리액트 서버 컴포넌트’ 이해하기 | 요즘IT