.png)
SSR, CSR 이란?
- 각각
Server Side Rendering,Client Side Rendering을 뜻한다.
SSR
- 웹페이지를 브라우저가 아닌 서버에서 렌더링 하는 것이 이야기한다.
- 브라우저가 서버로
GET요청을 보내면, 서버에서 해당 웹 페이지 파일을 렌더링하여 브라우저로 전송한다. - 만약 브라우저가 다른 페이지로 이동하면 서버는 위의 과정을 반복한다.
→ 다시 페이지 전체를 불러오게 되므로, 서버의 부하가 높다.
애초에 서버에서 부터 전부 작성된 페이지 파일을 전달받는다.
when?
- 검색 엔진 최적화가 우선순위인 경우.
→ 받아오는 파일에 문서의 내용이 전부 포함되어있기 때문에 SEO에 유리하다. - 페이지의 첫 화면의 렌더링이 빠르게 이루어져야 하는 경우.
- 사용자와의 상호작용이 적은 경우.
CSR
SSR과는 반대로, 클라이언트(브라우저) 에서 렌더링 하는 것을 이야기한다.- 브라우저가 서버로 요청을 보내면, 서버는 렌더링을 하지 않고 단일 웹페이지와 자바스크립트를 브라우저로 전송한다.
- 브라우저는 받은 데이터를 이용하여 페이지를 렌더링한다.
- 브라우저가 다른 페이지로 이동하는 경우
SSR과 다르게 서버가 웹페이지를 다시 보내지 않으며, 브라우저는 처음 받은 웹페이지 파일을 이용하여 페이지를 렌더링한다.
빈 HTML 을 받고, 데이터만을 받아 DOM을 이용하여 내용을 채워나간다.
when?
- 검색 엔진 최적화가 중요하지 않는 경우.
→ HTML이 비어있기 때문에 불리함. - 상호작용하는 요소가 많은 경우, CSR 은 매번 서버에서 불러오는 것이 아니므로 빠른 라우팅으로 더 나은 UX를 제공한다.
→ 매 상호작용마다 서버에서 불러오게 되면 속도가 느리겠죠잉. - 웹 앱을 제작하는 경우에도 속도 측면에서 더 나은 UX를 제공 할 수 있다.
+
- 가장 큰 차이점은 렌더링 되는 위치이다.
→ 서버, 클라이언트 - AJAX 가 사용되기 시작하면서 CSR이 발전하게 됨.
- 최근에는 CSR 의 SEO 도 발전하였다고 한다.
