CSR (Client Side Rendering)

• 웹의 단점인 페이지 새로고침을 최소화 하고, 더 빠른 응답성을 위해서 등장하게 되었습니다.
• Browser에서 Sever에 요청을 보내면, Server는 특별한 분석 없이 모두에게 똑같이 빈 HTML을 줍니다.
• Browser는 서버에게 받은 HTML 내부의 Javascript 코드를 실행하여 해당 Javascript가 상황에 맞게 해당 HTML을 그려주는 구조입니다.

CSR의 한계

• 요청을 보내면 빈 값을 보내주기 때문에 (문서의 내용을 알 수 없음) SEO(검색엔진 최적화)가 필요하게 되었고, 추가적으로 초기 랜더링 시간 단축의 목적으로 결국 서버에서 HTML문서를 만들어야 할 필요가 생기게 되었습니다.

SSR (Server Side Rendering 또는 Universal Rendering)

• Browser에서 Server에 요청을 보내면, React(예를 들어)로 만든 앱이 Node.js 환경에서 구동해 HTML String을 생성하게 됩니다.

• 서버는 Browser에게 HTML String과 기존에 CSR에서 필요했던 JS파일을 응답으로 줍니다.

• Browser는 해당 JS코드를 실행시킵니다.

• Hydration

Hydration은 React.js, Vue.js 등의 Client-side Framework가 서버에서 전송한 정적 문서를 데이터 변경에 반응할 수 있는 동적 형태로 변환하는 클라이언트 측 프로세스를 의미합니다.

• Isomorphic Javascript

SSR 과정 중 한 JavaScript 코드가 Node.js와 Browser 환경에서 모두에게 동작하게 되는데, 이렇게 두 환경에서 모두에게 동작할 수 있는 JavaScript 코드를 Isomorphic Javascript라고 합니다.