next.js SSR 과 리액트 서버 컴포넌트의 차이

넥스트13.4 이후 버전부터는 App Router 라는 새로운 방식의 라우팅이 나왔는데 이때 컴포넌트들이 기본적으로 리액트 서버 컴포넌트라고 해서 새로 도입된 개념이어서 리액트 서버 컴포넌트에 대해서 찾아보다가 서버에서만 렌더링 되는 컴포넌트라고 해서 SSR 방식과 비슷해보여서 그 차이가 뭔지 찾아 보았습니다.

 

검색해보니 신기하게 이렇게 비교하는 글들이 많아서 사람들 생각은 비슷하다고 생각했습니다.

 

SSR

제가 이해한 바로는 SSR은 서버에서 렌더링한 페이지를 HTML과 JS번들 파일을 클라이언트에 전달해주면 클라이언트는 HTML을 렌더링 한 후에 받아온 JS파일을 수화 하는 과정을 거쳐서 그때 리액트 컴포넌트로서 사용을 합니다.

(이것은 리액트 클라이언트 컴포넌트)

 

React Server Component

리액트 서버 컴포넌트는 서버에서 렌더링한 컴포넌트를 바로 클라이언트에 전송을 하면 클라이언트는 별도의 추가 과정없이 그대로 리액트 컴포넌트로서 사용할 수 있다는 점이 었습니다.

 

리액트 서버 컴포넌트 는 클라이언트에서 js 코드가 실행되지 않으므로 부하가 줄어들어 성능이 좋아지는 대신에 브라우저에서 리액트 훅을 써서 상태관리를 하거나, 브라우저 이벤트를 사용한다던지 클라이언트에서 상호작용이 필요할 경우에는 기존의 클라이언트 컴포넌트를 써야되기 때문에 필요한 경우에 따라서 혼합해서 사용하는 것 같습니다.