모던 리액트 Deep Dive - 서버 사이드 랜더링을 위한 리액트 API

⚡서버 사이드 렌더링 - 4.2 서버 사이드 랜더링을 위한 리액트 API 살펴보기 

• Node.js같은 서버환경에서만 실행할 수 있으며, window환경에서 실행 시 에러가 발생할 수 있음
• 리액트에서 서버 사이드 렌더링을 실행할 때 사용되는 API를 확인해 보려면 리액트 저장소의 react-dom/server.js를 확인하면 됨
• react-dom/server.js에는 react-dom이 서버에서 렌더링하기 위한 다양한 메서드를 제공하고 있음

4.2.1 renderToString

• 인수로 넘겨받은 리액트 컴포넌트를 렌더링해 HTML문자열로 반환하는 함수
• 최초페이지를 빠르게 HTML로 먼저 렌더링 하는 역할
• 클라이언트에서 실행되는 자바스크립트 코드를 포함시키거나 렌더링하는 역할까지 해주지는 않음
• 클라이언트에서 실행되지 않고, 완성된 HTML을 서버에서 제공할 수 있으므로 초기 렌더링에서 뛰어난 성능을 보임

4.2.2 renderToStaticMarkup

• renderToString처럼 리액트 컴포넌트를 기준으로 HTML문자열을 만들지만, 리액트에서 사용하는 추가적인 DOM속성을 만들지 않음(리액트에서만 사용하는 속성을 제거하면 HTML의 크기를 약간 줄일수 있음)
• 리액트의 이벤트 리스너가 필요없는 완전히 순수한 HTML을 만들때만 사용

4.2.3 renderToNodeStream

• 브라우저에서 사용하는 것이 불가능(renderToString와 renderToStaticMarkup는 브라우저에서 사용가능)
• Node.js같은 환경에서 의존함
• 생성해야하는 HTML의 크기가 작다면 renderToString으로 가능하나, 크기가 크다면 renderToNodeStream을 사용해야 함

4.2.4 renderToStaticNodeStream

• renderToNodeStream과 제공하는 결과물은 동일하지만, 리액트 자바스크립트에 필요한 리액트 속성이 제공되지 않음

4.2.5 hydrate

• 생성된 HTML콘텐츠에 자바스크립트 핸들러나 이벤트를 붙이는 역할을 함
• 리액트에서 render 함수는 컴포넌트와 HTML의 요소를 인수로 받는데, 인수로 받은 두 정보를 바탕으로 HTML의 요소에 해당 컴포넌트를 렌더링 하며, 여기에 이벤트 핸들러를 붙이는 작업까지 모두 한 번에 수행함
• render와의 차이점은 이미 렌더링 된 HTML이 있다는 가정하에 작업이 수행되고, 렌더링 된 HTML을 기준으로 이벤트를 붙이는 작업만 실행함

4.2.6 서버 사이드 렌더링 예제 프로젝트