SSR, CSR

SSR (서버 사이드 렌더링)

출처: 인프런-김영한

웹 브라우저의 요청이 들어온다.

DB를 조회해 html 동적으로 생성후 전달하는 방식.

즉, 서버가 html을 다 만들어서 웹 브라우저에 응답하는 것이다. 주로 정적인 화면에 사용

=> 서버에서 최종적인 HTML을 만들어 웹 브라우저에 전달한다. EX) JSP, 타임리프

 

CSR (클라이언트 사이드 렌더링)

출처: 인프런-김영한

1. 서버에서 HTML을 응답한다. 그런데 빈 HTML이다. 대신 자바스크립트 링크를 달아놓는다.
2. 웹 브라우저가 자바스크립트를 서버에 요청한다.
3. 자바스크립트 코드 안에 HTML 렌더링 코드가 들어있다.
4. 웹 브라우저가 HTTP API를 요청하여 받은 JSON으로 HTML을 동적으로 만들어 본다.

=> 클라이언트 사이드에서 HTML을 만들어낸다. EX) React, Vue.js

HTML 결과를 자바스크립트를 사용해 웹 브라우저에서 동적으로 생성하여 적용

웹 환경에서 앱처럼 필요한 부분만 적용할 수 있다. 웹 브라우저 URL이 변하지 않는다.

 

 

Ajax 댓글을 구현하며 이 좋은걸 왜 모든 부분에 적용을 안하는지 궁금했었는데

각각 장단점이 존재했었다..^^