SSR

SSR: Server side rendering, 브라우저는 interactive 하지는 않지만 ‘보는 것’에는 지장이 없는 HTML을 먼저 유저에게 보여주고 그 사이에 자바스크립트를 다운로드 받아 hydration 되는 방식.

• 서버쪽에서 pre-render를 끝마친 HTML을 브라우저에게 전달하는 방식입니다.
• 음식을 미리 만들어 놓았기 때문에 즉시 음식을 제공하는 멋진 레스토랑.

1. Write site in React
2. Create build for production useing ReactDOMServer, a server-side React API to generate HTML from React.
3. On Initial Load HTML generated from the server is displayed
4. ReactDOM. hydrate(), hydrates the HTML page rendered from the server with JavaScript

CSR

CSR: Client side rendering, 브라우저에서 한번에 파일을 다운로드 받아 초기 로딩속도는 느리지만 화면 깜빡임이 없고 바로 interactive 한 사이트를 보여줄 수 있는 방식.

• 브라우저에서 render 되면서 결과를 바로 보여주는 방식입니다.
• 주문을 받고 음식을 만들기 시작하는 식당.

Hydration

hydrate는 Server Side 단에서 렌더링 된 정적 페이지와 번들링된 JS파일을 클라이언트에게 보낸 뒤, 클라이언트(브라우저) 단에서 HTML 코드와 React 인 JS코드를 서로 매칭 시키는 과정을 말한다.

• Server 단에서 pre-render 된 이후 interactive한 동작이 가능하게 된 이유가 바로 hydration이 진행되었기 때문이다.