RSC (React Server Components)

🪐 React Server Components(리액트 서버 컴포넌트) 란?

리액트 앱 성능을 향상시킬 목적으로 서버쪽에서 렌더링(Server Side Rendering, SSR)되어 리액트 컴포넌트를 작성하는 방식.
즉, bundle 사이즈를 줄여주기 위한 솔루션

❗ 리액트 앱의 문제점 ? bundle.js !
리액트 앱의 문제점은, bundle.js의 사이즈가 매우 커서 이를 다운로드 하는 시간이 길어지고 네트워크 요청 수가 크다는 것이다. 결과적으로 유저가 첫 화면을 보기 까지의 시간이 오래 걸린다는 단점이 있다. 또한 html이비어있기 때문에, SEO(Search Engine Optimization)의 문제가 있었다.
(이는 next.js를 이용하여 해결 가능)

👆 next.js란 React의 SSR(Server Side Rendering)을 쉽게 구현할 수 있게 도와주는 프레임워크. React를 기반으로 한 SPA를 빠르게 빌드할 수 있도록 도와주는 역할

❗ React로 애플리케이션을 개발할 때 직면하는 문제
사용자가 요청한 페이지 / 데이터를 사용할 수있을 때까지 기다리는 동안 일반적으로 발생하는 네트워크 요청 수가 많다는 것.
예를 들어 데이터 가져 오는 일반적인 접근 방식은 useEffect hook을 사용하여 API를 호출하는 것인데, useEffect로 데이터를 가져 오면 의미있는 상호 작용이 지연된다.

useEffect (() => { 
  axios.get ("URL")
   .then ((response) => { 
    // 데이터를 상태로 설정
    setData (response.data); 
  }) 
  .catch ((오류) => { 
    console.log (오류); 
  }); 
}, []);

이런 데이터 가져 오기 접근 방식은 사용자에게 렌더링하는 데 항상 시간이 걸린다.

🪐 RSC의 장점

• 서버 컴포넌트는 번들(bundle)에 포함되지 않는다. 절대 브라우저를 통해 다운로드 되지 않아서 번들 사이즈에 영향을 주지 않는다.
• 정적 렌더링 전용 구성 요소를 서버사이드로 이동하고, 인터랙티브한 상태 기반 구성 요소들은 그대로 클라이언트 측에 유지하여 번들 크기를 줄일 수 있다.
• 인터렉션을 하는 컴포넌트는 클라이언트 사이드로 유지하며, static을 옮김으로서 번들사이즈를 줄일 수 있다.
• 서버 컴포넌트는 서버사이드의 리소스들에 접근이 가능하다. 데이터베이스나 파일시스템에 직접 접근해서 데이터를 패치하는게 가능할 뿐만 아니라 클라이언트사이드에서 API를 통한 패치도 가능하다.
• 서버 컴포넌트는 또한 GraphQl쿼리도 읽을 수 있다.

🪐 리액트 서버 컴포넌트(RSC)와 서버 사이드 렌더링(Server Side Rendering, SSR) 차이점

Nextjs와 같은 SSR 방식 클라이언트로 서버에서 렌더링 된 것을 HTML로 전송한다.
따라서 리액트로 개발 했을때 유저가 느꼈던 페이지의 느린 첫 화면 로딩이 좀 해결되는 것처럼 보이지만, 문제점은 유저가 자바스크립트 파일이 다운로드 될 때 까지는 아무 것도 못한다는 것이다.

그러나 리액트 서버 컴포넌트(RSC)는 서버 컴포넌트는 HTML로 렌더 되지 않고 클라이언트로 스트리밍되는 특수한 형태의 포맷으로 렌더링된다. 이는 JSON 과 유사해보이는 포맷이다.
또한 SSR은 맨 처음의 렌더링에서만 사용되지만, 서버 컴포넌트는 데이터를 다시 렌더링 하기위해 여러번 패치될 수 있다.