[Network] CSR, SSR 개념 및 장단점 비교

 

들어가기전에 

---

SSR 의 대표적인 도구로 JSP
CSR 의 대표적인 도구로 React.js 

SSR 은 SEO 작업을 해야할 때 사용한다.

학생때는 딱 이 정도 깊이로만 알고 있었는데 HTML을 PDF 로 변환하는 작업을 진행하면서 개념이 정확히 정립된 것 같아 내용을 공유하고자 합니다.

 

---

SSR 과 CSR 을 구분하는 기준

---

SSR 과 CSR을 구분하는 기준은 아래와 같습니다.

바로 서버에 요청 시 완성된 HTML DOM 을 Response 로 반환을 하느냐 인데요.

다른말로 표현하자면 JavaScript 가 HTML DOM 을 조작하느냐 아니냐로 구분된다 할 수 있습니다.

 

Response 로 전달된 HTML 가 JS 실행 전과 실행 후가 동일하다면 SSR, 다르다면 CSR 로 보셔도 무방합니다.

 

글로만 설명하면 오해를 할 수 있으니 영상과 이미지를 첨부하였습니다.

 

 

SSR (Server-Side Rendering)

---

 

우리가 브라우저를 통해 특정도메인(http://localhost:8080/cat)에 대해 요청을 하면 해당 도메인을 호스팅하고 있는 서버에게 요청을 보내게 되고 해당 요청에 대한 응답을 브라우저는 렌더링하게 됩니다.

 

 

그리고 Response 로 전달된 JS 는 브라우저에서 실행이 되게되며, 해당 JS 는 HTML DOM 요소에는 어떠한 조작(추가/삭제)도 하지 않고 있습니다. 

 

Response 로 전달된 HTML 은 JS 실행 전과 실행 후가 동일하면 바로 SSR 입니다!

---

CSR (Client-Side Rendering)

---

 

반대로 CSR 영상에서는 서버(http://localhost:8080/cat)로 요청하고 받은 HTML Response 에 <button> 이라는 요소가 없습니다.

 

 

HTML이 요청한 JavaScript 가 버튼을 만들어 HTML DOM 을 조작하고 있죠.

 

서버 입장에서는 브라우저가 클라이언트이며

브라우저에서 실행되어 HTML 을 렌더링한다고 하여 Client-Side Rendering 이라고 이름이 붙여지게 된 겁니다!!

---

오해할 수 있는 사실들

---

JSP 를 사용하는 어플리케이션은 SSR 이다?

JavaScript 없이 JSP 만 사용하는 어플리케이션이라면 SSR 이라 할 수 있습니다.

또한 JavaScript 가 있더라도 HTML DOM 에 조작을 가하지 않는다면 완벽한 SSR 이라 할 수 있죠.

 

렌더링 종류는 SSR 과 CSR 딱 2가지이다?

저는 처음에 구글링으로 SSR 과 CSR 을 배웠기 때문에 렌더링 종류는 무조건 둘 중 하나인줄 알았습니다.

그 오해가 SSR 과 CSR 이 무엇인지 깨닫는데 시간이 오래걸리게 만들었죠. 

JSP 가 응답으로 내려오고 JavaScript 가 HTML DOM 을 조작한다면 CSR 과 SSR 이 같이 사용되고 있다고 생각하시면 됩니다.

 

React Application 도 React 를 호스팅하고 있는 서버에서 빈 HTML 을 응답으로 내려주기 때문에 SSR + CSR 을 같이 사용하는것이라 볼 수 있습니다. 다만 SSR 비율이 엄청 적을 뿐이죠.

---

마무리하며

글을 마치며 SSR 과 CSR 의 장단점을 파악할 수 있는 좋은 이미지들이 있어 첨부합니다.

 

 

 

 

 

 

 

Reference

---

SSR과 CSR의 차이