SSR 기본 동작 원리
요약
create-react-app으로 프로젝트를 생성했더라면, client-side rendering을 하기 때문에 SSR로 하려면 추가 작업이 필요하다.
아래의 영상을 본다면, 쉽게 구현할 수 있다.
Key Point
중요한 코드는 아래와 같다.
#server side
ReactDOMServer.renderToString()
#client side
ReactDom.hydrate()부연 설명
서버에서 react에서 만든 html dom을 string으로 받아 html 문서에 그대로 뿌려주고, client 단에서는 중복 렌더링을 하지 않기 위에 render() method 대신에 hydrate를 써서 해결한다.
서버에서 react 코드를 사용하기 때문에 babel를 이용해서 transpile를 해야한다. 이부분을 꼭 챙겨야 작동한다.