어떤 작업을 하던지 템플릿이 정해져 있다면 틀에 맞추어 데이터를 위치시키면 되어 편리합니다.
개념
Web Template Engine
템플릿 양식과 데이터를 결합하여 웹 페이지를 출력해주는 엔진을 말합니다.
탄생배경과 필요성
- 코드량 감소 : HTML에 비해 간단한 문법을 사용하기때문에 코드량을 줄일 수 있다.
- 재사용성 : 템플릿에 맞추어 데이터만 변경되는 경우가 많다.
- 유지보수에 용이 : 넘겨주는 데이터만 수정하면 된다.
종류
1. SSR 서버사이드렌더링
View를 서버에서 렌더링 해 오는 방식
첫 화면 로딩이 매우 짧음
: 서버단에서 View 렌더링이 이루어지기 때문입니다. 그러나 그 후에 JS파일을 모두 다운받고 적용하기 전까지 인터랙션에 반응하지는 못합니다. 그럼에도 사용자 입장에서는 로딩속도가 굉장히 빠른 것으로 느껴진다.
SEO (search engine optimization) 유리함
: CSR방식으로 이루어진 사이트는 JS파일 등을 다운받은 후 화면이 렌더링되기 때문에 HTML 내용이 비어있는 시간이 길어 데이터 수집에 불리합니다. 반면 SSR은 데이터 수집을 빠르고 용이하게 할 수 있어 검색엔진에 최적화되어 있습니다.
서버 부담
: View 변경 시마다 서버에 계속 요청을 해야하므로 서버 부담이 있다.
예시 ) 전통적인 웹 페이지 방식
2. CSR 클라이언트사이드렌더링
서버에서 렌더하지 않고 HTML, JS파일, 각종 리소스를 다운받은 후에 브라우저에서 렌더링하여 View에 표기하는 방식
비교적 로딩이 길게 느껴짐
: SSR에 비해 초기 View를 볼 수 있는 시간이 늦다.
초기 로딩 후 빠른 작업 속도
: View 이후 인터랙션 가능 시간까지 공백이 존재하던 SSR과 달리 CRS는 View가 보여짐과 동시에 인터랙션이 가능하다. 또한 서버에 다시 요청할 필요없이 클라이언트 내에서 작업이 이루어지므로 속도가 빠르다.
SEO에 불리함
: JS파일 다운로드까지 받은 후 렌더링이 진행되므로 HTML의 데이터를 빠르게 수집하기 어려워 SEO에 불리하다.
예시 ) SPA (Single Page Application)
참고자료 :
https://jaroinside.tistory.com/24
https://insight-bgh.tistory.com/252
https://dlgkstjq623.tistory.com/304?category=786635
