CSR(Client Side Rendering)과 SSR(Server Side Rendering) 이해와 차이

이미지 출처:Medium

Introduction

웹 개발에서의 성능 최적화는 항상 중요한 주제입니다. 특히, 웹 페이지가 사용자에게 빠르게 로딩되고, 사용자의 상호작용에 즉각적으로 반응하는 것이 매우 중요합니다. 이것이 바로 CSR(Client Side Rendering)과 SSR(Server Side Rendering)이 등장하는 곳입니다.

CSR(Client Side Rendering)이란?

CSR이란, 웹 브라우저(클라이언트)에서 웹 페이지를 그리는 방식입니다. 이 경우, 브라우저가 서버에서 JavaScript 파일을 다운로드하고, JavaScript가 웹 페이지의 내용을 동적으로 그리게 됩니다.

CSR 동작 원리?

웹 브라우저가 웹 페이지를 요청하면, 서버는 JavaScript 파일을 브라우저에 보냅니다. 그런 다음 브라우저는 이 JavaScript를 실행하고, 이를 통해 웹 페이지의 내용을 그립니다.

예를 들어, 블로그 글을 보는 웹 페이지라면, JavaScript는 블로그 글의 내용을 서버로부터 가져와서 사용자에게 보여줍니다.

CSR 장단점?

CSR의 주요 장점은 사용자의 상호작용에 대한 응답이 빠르다는 것입니다. 페이지의 내용이 클라이언트 측에서 그려지기 때문에, 사용자의 액션에 대한 반응이 거의 즉각적입니다.

그러나 CSR의 단점은 초기 로딩 시간이 길 수 있다는 것입니다. JavaScript 파일을 다운로드하고 실행하는데 시간이 필요하기 때문입니다. 또한, CSR은 검색 엔진 최적화(SEO)에 문제가 될 수 있습니다. 일부 검색 엔진은 JavaScript를 실행하지 않으므로, 페이지의 동적 내용을 색인화하는 데 문제가 될 수 있습니다.

SSR(Server Side Rendering)이란?

SSR은 서버에서 웹 페이지를 그리는 방식입니다. 웹 페이지 요청이 서버에 도착하면, 서버는 해당 페이지의 HTML을 그리고 이를 브라우저에 전송합니다.

SSR 동작 원리?

웹 브라우저가 웹 페이지를 요청하면, 서버는 해당 요청을 받아서 필요한 데이터를 조회하고, 이 데이터를 기반으로 웹 페이지를 그립니다. 이렇게 그려진 웹 페이지는 브라우저로 전송되어 사용자에게 보여집니다.

SSR 장단점?

SSR의 주요 장점은 초기 로딩 시간이 빠르다는 것입니다. 왜냐하면 서버에서 그려진 완전한 HTML을 브라우저에 보내기 때문에, 사용자는 페이지의 내용을 빠르게 볼 수 있습니다. 또한, SSR은 SEO에 유리합니다. 검색 엔진은 서버에서 그려진 완전한 HTML을 쉽게 읽을 수 있으므로, 페이지의 내용이 검색 엔진에 의해 쉽게 색인화될 수 있습니다.

 

그러나 SSR의 단점은 서버에 부하를 줄 수 있다는 것입니다. 모든 페이지 요청에 대해 서버가 HTML을 그려야 하므로, 트래픽이 많은 경우 서버에 큰 부하가 발생할 수 있습니다.

Conclusion

	CSR	SSR
장점	사용자 상호작용 빠름	초기 로딩 시간 빠름
단점	초기 로딩 시간 길음	서버 부하 증가 가능성
SEO 친화성	불리함	유리함