React v19 - React Server Components(RSC)

---

https://react.dev/reference/rsc/server-components

Server Components – React

 

https://funveloper.tistory.com/214

React 의 RSC, RCC 에 대하여 (with Next.js)

 

https://www.blan19.com/tech/rsc-deep-dive

React Server Components(RSC) 차근차근 이해하기

 

---

 

 

RSC '서버의 컴포넌트화'

서버에서 렌더링 되는 컴포넌트. 서버 컴포넌트는 async 함수로 선언하고 내부에서 await 를 사용하여 비동기 데이터를 가져와 이를 렌더링 하는 것이 가능하다. 즉, 비동기 컴포넌트가 되는 것이다.

기존 Next.js 에서는 서버에서 데이터를 fetch 해오고 이를 컴포넌트에 전달하기 위해서는 페이지 단위로 페이지의 최상단에서 getServerSideProps 함수를 사용하여 이를 하위 컴포넌트에 일일이 넘겨줘야 했지만, 서버 컴포넌트가 도입되면서 이제는 페이지의 최상단이 아닌 각각의 컴포넌트 안에서 비동기 데이터를 가져와 이용하는 것이 가능하다.

⦁ RSC 에서는 useState, useEffect 와 같이 클라이언트에서 사용 되는 훅을 사용할 수 없다. (직렬화가 되어야 하므로)
⦁ RSC 에서는 onClick, onFocus 와 같은 이벤트 핸들러는 사용이 불가능하다. (직렬화가 되어야 하므로)
⦁ RSC 가 렌더가 완료되기 전까지 클라이언트에서는 React 의 Suspense 로 RSC 자리에 다른 컴포넌트를 대신 보여주는 것이 가능하다. 
⦁ RSC 에서 사용되는 패키지들은 모두 서버에서 import 되고 서버에서만 사용되기 때문에 js 번들로 클라이언트에 전달되지 않는다.