[React] SSR을 위한 리액트 API

velog에 적었던 글들을 차근차근 tistory로 옮길 예정입니다.

[react] SSR을 위한 리액트 API

 

 

리액트 API

• 리액트는 브라우저 자바스크립트 환경에서 렌더링 할 수 있는 방법을 제공하지만 동시에 리액트 애플리케이션을 서버에서 렌더링할 수 있는 API도 제공한다.
• API는 서버에서 렌더링하기 위한 다양한 메서드를 제공하는데, 이는
  server.node.js에 있는 함수를 export한 것이다.

 

대표 함수들

renderToString

-> 인수로 넘겨받은 리액트 컴포넌트를 HTML 문자열로 반환
-> 서버 사이드 렌더링을 구현하기 위한 가장 기초적인 API
-> 최초의 페이지를 HTML로 렌더링할 때 사용
-> Ex.

  { fruits.map((fruit)=>{<li>{fruit}</li>}) } 

라는 코드에 renderToString을 사용하면

  <li>apple</li><li>banana</li><li>peach</li> 

를 반환한다. 이 때, 이벤트나 핸들러는 포함하지 않는다.

 

renderToStaticMarkup

-> renderToString 함수와 거의 같은 값은 반환
-> 하지만 data-reactroot와 같은 react에서만 사용하는 추가적인 DOM 속성을 만들지 않음. => HTML 크기를 아주 조금이지만 줄일 수 있다.
-> 이 때문에 hydrate(이벤트 리스너 등록하는 함수)를 실행할 때 에러 발생.
-> 따라서 이벤트가 없다는 가정하에 사용하기 좋다!

 

renderToNodeStream

-> renderToString과 결과문이 완전히 동일.
-> 브라우저에서 사용하는 것이 완전히 불가능하다는 점이 다르다.
-> ReadableStream을 반환하기 때문에 서버 환경에서만 사용할 수 있다.
-> 생성하는 HTML 결과물의 크기가 클 경우에는 chunk로 나눠서 처리해야하기 때문에 renderToNodeStream이 필요하다.
-> 따라서 대부분 서버 사이드 렌더링 프레임워크는 renderToString 대신 renderToNodeStream을 사용한다.

 

renderToStaticNodeStream

-> renderToStaticMarkup과 동일하게 renderToStaticNodeStream 에서 리액트 속성이 제공되지 않는다.
-> 마찬가지로 hydrate가 필요없을 때 사용 가능하다.

 

hydrate

-> 생성된 HTML 콘텐츠에 자바스크립트 핸들러나 이벤트를 붙인다.
-> render함수와 인수를 넘기는 것이 거의 유사하다. 차이점은 hydrate 는 이미 렌더링된 HTML이 있다는 가정하에 수행된다는 점.
-> static 함수로 생성된 정보를 넘겨줄 경우에는 에러가 나며, 렌더링은 실행된다. 이 때 에러는 hydrate함수가 단순히 이벤트를 추가하는 것 이 아니라, 렌더링을 한 번 수행하면서 받은 결과와 렌더링한 결과를 비교하는데, 이때 나는 것이다. 불일치가 발생하면 에러를 내고 hydrate함수가 렌더링한 기준으로 페이지를 그린다.
-> 하지만 제대로 된 페이지를 그린다고 다른 값을 주면 항상 렌더링을 2번씩 하게 되어 서버 사이드 렌더링을 사용하는 의미가 사라지므로 주의하자!

 

서버 사이드 렌더링

• 앞의 함수들을 이용하면 어느정도 구현할 수 있지만, 리액트 팀 또한 직접 구현해 사용하는 것보다는 Next.js 같은 프레임워크 를 사용하는 권장한다.
• 사용자에게 더 빠른 웹페이지 결과물을 제공할 수 있다는 장점 은 있으나 고려해야할 것들이 많고 서버에서 렌더링하는 것이 더욱 복잡해졌다.

따라서 어쩌면 사용하는 것은 프론트 개발자에게 도전일지도 모른다.