한번의 요약으로 모든 내용을 다룰 순 없다고 생각이 들어서, 추후에 실습과정과 Next.js 13 version App routing 까지 학습하여 추가적으로 요약을 해볼 생각입니다.

참고문헌

https://tech.kakaopay.com/post/react-server-components/

https://react.dev/blog/2020/12/21/data-fetching-with-react-server-components

요약

기존 React 의 data fetching 방식에 대한 고민

• 전통적으로 React 컴포넌트에서 데이터 fetch를 통해 렌더하는 과정은, 부모 컴포넌트에서 전체 데이터를 가져와 props 로 전달하거나, 각 컴포넌트마다 fetch 를 하는 방법입니다.

• 두 방식 모두 각각의 문제점을 가지고 있는데, 의존성이 커지는 문제와 부모 컴포넌트에서 Fetch 가 일어날 동안 자식 컴포넌트는 렌더되지 못하는 waterfall 현상이 발생합니다.

React Server Component

• Server Component 는 client 단이 아닌 server 단에서 렌더링 되어 client 에 전달된다는 부분에서 기존 컴포넌트와 차이를 가지게 됩니다.

• server 단에서 데이터를 받아와 처리하기 때문에 기존 client 단에서 매 데이터를 요청할 때보다 latancy 가 줄어들어 속도가 증가합니다

React Server Component 의 이점

• server 단에서 렌더링되기 때문에, server 에서 접근할 수 있는 데이터베이스, 파일 시스템 등 서버사이드 데이터에 직접 접근이 가능합니다. 또한, 접근하여 얻은 데이터를 자식 클라이언트 컴포넌트로 props 전달이 가능한데, 주의할 점은 이 데이터가 json 파일로 인코딩 가능한 serializable props만 전달 가능하며 function은 전달할 수 없습니다.

• Server Component 에서 사용되는 여러 패키지들은 번들 사이즈에 포함되지 않습니다. Server Component 의 자바스크립트 코드 자체가 번들 사이즈에 없기에, 여기에 포함되는 패키지 역시 포함되지않아 번들사이즈를 줄일 수 있다는 장점이 있습니다.

• 매번 코드 분할을 위해 React.lazy 나 dynamic import 문을 일일히 작성해줄 필요 없이, Server Component 내 import 되는 Client Component 들은 자동적으로 코드 분할이 됩니다.

React Server Component 사용시 유의점

• server 단에서 렌더링이 되기에 Browser API 를 사용할 수 없습니다.

• 또한 state, effect 등 기존 컴포넌트에서 사용되던 hook 을 사용할 수 없습니다

• 즉, 유저와의 인터렉션은 불가능합니다.

SSR(Server Side Rendering) 과의 차이점

둘 다 server 단에서 렌더링된다는 공통점이 있고 배척되는 개념은 아니지만, 추구하는 방향에서 차이가 있습니다.

• SSR 방식은 server 단에서 렌더링을 한 뒤 HTML 파일을 client 에게 전달합니다. 이렇기에 매 파일이 전달될때마다 페이지는 새로고침 됩니다.

• 반면 Server Component 의 경우 HTML 이 아닌 특수한 데이터 형식으로 전달이 되기 때문에 client 내 state 값이 유지되면서 refetch 될 수 있습니다.

• Next.js server 로직에 접근하는 방법은 (페이지 라우팅 기준입니다) getServerSideProps() 와 같은 한정된 로직에서만 가능합니다.