SSR VS CSR

SSR VS CSR

서버 사이드 템플릿 엔진 VS 클라이언트 사이드 템플릿 엔진

SSR

 

서버에서 DB 혹은 API에서 가져온 데이터를 미리 정의된 Template에 넣어 Html을 그려서 클라이언트에 전달해주는 역할을 합니다.   즉, HTML 코드에서 고정적으로 사용되는 부분은 템플릿으로 만들어두고 동적으로 생성되는 부분만 템플릿 특정 장소에 끼워넣는 방식으로 동작할 수 있도록 해줍니다.

1. 서버가 클라이언트의 요청을 받습니다.
2. 필요한 데이터(DB에서 가져오거나 API에서 가져오는 데이터)를 가져옵니다.
3. 미리 정의된 Template에 해당 데이터를 적절하게 넣습니다.
4. 서버에서 HTML(데이터가 반영된 Template)을 그립니다.
5. 해당 HTML을 클라이언트에 전달합니다.

CSR

 

1. 클라이언트에서 공통적은 프레임을 미리 Template으로 만들어 둡니다.
2. 서버에서 필요한 데이터를 받습니다.
3. 데이터를 Template에 적절한 위치에 replace하고 DOM 객체에 동적으로 그려줍니다.

클라이언트 사이트 템플릿 엔진의 필요성?

- Javascript 라이브러리로 렌더링이 끝난 뒤 (즉, HTML DOM이 다 그려진 뒤)에 서버 통신 없이 화면 변경이 필요한 경우에 필요합니다.
 계속해서 페이지를 이동하여 서버 쪽으로 호출이 발생한다면 서버 사이드 템플릿 엔진을 이용하면 되는데, 단일 화면에서 특정 이벤트에 따라 화면이 계속 변경되어야 하는 경우는 Javascript로 HTML을 렌더링 하는 경우가 많습니다.

즉 단일 화면에서의 화면 변경에서는 서버 단을(서버 사이드 템플릿  엔진 등)

사용하지 않고 클라이언트 사이드 템플릿 엔진을 사용하고 계속해서 페이지를 이동하여야 한다면

서버 단을(서버 사이드 템플릿  엔진 등)을 사용한다는 차이가 있습니다.