React Server Components(RSC)와 Server Side Rendering(SSR)의 차이점은 무엇입니까?

Question

React 18의 출현과 함께 RSC가 탄생했습니다. NextJS의 SSR과 어떻게 다른지 궁금합니다.

Answer 1

두 경우 모두 React Javascript 코드는 Node.js(또는 Deno 또는 사용 중인 모든 항목)에 의해 실행됩니다. 그러나 그들은 다른 것을 생산합니다.

서버 측 렌더링

서버 측 렌더링은 React가 ReactDom의 renderToString() 메소드를 사용하고 해당 HTML 문자열을 클라이언트에 보내는 것입니다. 이는 서버가 정적 HTML을 보내는 것과 동일합니다.

그런 다음 일반적으로 SSR 설정을 통해 React는 클라이언트 측에서 다시 실행되어 동일한 렌더링된 HTML에서 실행되고 클릭 핸들러 연결 및 상호 작용 추가와 같은 작업을 수행합니다. 이를 위해서는 서버와 클라이언트가 렌더링할 동일한 데이터가 있어야 합니다. 이는 서버의 데이터를 클라이언트의 서버와 클라이언트 모두에서 React를 사용하면 초기 페이지 로드는 SSR이 될 수 있고 후속 페이지 로드는 클라이언트 측이 될 수 있습니다. 초기 페이지 로드의 경우 SSR은 클라이언트 측 렌더링보다 훨씬 빠르며, 모든 Javascript 리소스가 다운로드되면 훨씬 더 빠릅니다. Next.js는 SSR을 사용할 때 기본적으로 이 전략을 시행합니다.

서버 구성요소

서버 구성 요소는 HTML 문자열로 렌더링되지 않습니다.

React "컴포넌트"는 React "요소"를 반환하는 함수 또는 클래스입니다. React "요소"는 렌더링할 트리의 객체 표현입니다. 일반 작동 모드에서 ReactDOM은 이러한 요소 객체를 가져와 DOM에 렌더링합니다.

서버 구성요소는 클라이언트에 다시

요소로 반응합니다. 서버에서 구성 요소는 클라이언트에 전달되는 요소(기본적으로 JSON)를 실행하고 생성합니다. 그런 다음 이러한 요소 가 클라이언트에서 렌더링 되어 DOM에 배치됩니다.