[HTTP] CSR & SSR 이란?

SSR

Server Side Rendering

 

서버에서 HTML을 만들어서 주는 방식을 의미한다.

서버에서 매 요청마다 특정 요청에 맞는 HTML을 만들어서 반환해주는 방식이다.

특징으로는 특정 HTML을 보내줌으로써, 매 요청마다 새로고침 되어 렌더링이 된다는 특징이 있다.

 

 

CSR

Client Side Rendering

 

클라이언트가 서버에 요청을 보내면 index.html과 javascript 전체를 보내주게 되고, 클라이언트 브라우저 내부에서 받아온 javascript에 기재된 html 코드를 읽어와 동적으로 클라이언트가 직접 화면에 렌더링을 하는 방식을 의미한다.

특징으로는 매 요청마다 클라이언트 내부에 있는 html을 동적으로 렌더링하기 때문에 새로고침 없이도 렌더링이 된다.

 

결론

SSR은 서버에서 HTML을 보낸다고 생각하면 된다.

CSR은 클라이언트가 이미 HTML을 다 가지고 있어서 직접 브라우저에서 변경한다고 생각하면 된다. 쉽게 말해, 자바스크립트에서 동적 렌더링을 하는 방식을 CSR이라고 생각해도 무방한 느낌이다. 결국은 CSR 자체의 의미도 javascript에 html을 포함시켜 보여주기 때문에 자바스크립트에 내포된 html을 동적으로 렌더링을 해주기 때문이고, 한 가지 알아야 할 사항은 자바스크립트에 html을 모두 포함시켜서 애초에 만들기 때문에 빌드 된 파일을 처음 요청에 받기 때문에 오래 걸린다는 단점이 있다. 이렇게 받게 된 파일의 장점은 페이지의 이동마다 html을 서버에서 받아오지 않는 장점은 존재한다. 그렇기 때문에 스무스하게 페이지가 넘어가는것이다.