[Web] CSR과 SSR이란 무엇일까?

SSR과 CSR이란?

SSR과 CSR이란 개념은 웹의 UI를 생성하는 렌더링 과정이 어디에서 일어나는 지에 따라 그 차이가 있습니다. 이 두 개념을 잘 이해하기 위해선 웹 브라우저가 어떻게 동작하는지, 웹 사이트가 어떤 과정을 통해 우리 눈 앞에 나타나게 되는지를 미리 알고 있어야 합니다. 이에 대한 내용은 제가 예전에 작성해 둔 포스트를 아래 링크로 달아드리니, 부디 참고해주시기 바랍니다.

주소창에 naver.com을 치면 일어나는 일을 쉽게 이해해보자

---

웹에서 UI를 만드는 역할은 보통 HTML이 담당합니다. 물론 JavaScript를 이용해서 HTML을 조작하는 것이 가능하므로, JavaScript를 통해 UI를 제공해줄 수도 있는 것입니다. 그런데 결론적으로는, 어떤 식으로든 UI를 만들기 위해선 최종적으로 HTML 형태가 만들어져 있어야 하기 때문에, 결국 이 HTML을 어디에서 만들 것인지가 우리가 주목해야 할 부분입니다.

 

이 때, 웹 서버에서 UI에 필요한 정보들이 담긴 HTML을 미리 만들어 브라우저로 전송하는 방식을 SSR(Server Side Rendering)이라 합니다. 이 방식은 웹 서버에서 HTML을 주도적으로 만듭니다.

 

반면에, 웹 서버에 있는 HTML에는 UI에 대한 내용이 거의 없고, 브라우저에서 JS가 실행되면서 필요한 UI를 그때그때마다 생성해내는 방식을 CSR(Client Side Rendering)이라 합니다. 이 방식은 클라이언트에서 HTML을 주도적으로 만듭니다. 보통 CSR은 React, Vue의 SPA(Single Page Application)에서 주로 쓰입니다.

 

---

SSR과 CSR의 특징 (장단점)

HTML(UI)을 만들 때 브라우저(클라이언트)는 서버에 요청을 하여 데이터베이스에 있는 데이터를 가져옵니다. 이 때, SSR 방식은 서버에서 HTML을 만들 때마다 그 때 필요한 모든 데이터를 한 번에 가져옵니다. 따라서 웹 브라우저에 다른 페이지를 새로 띄울 경우, 서버는 HTML을 처음부터 다시 만들어주어야 합니다. 그럴 때마다 서버는 매번 데이터베이스에 접근하여 필요한 데이터를 가져와야 하는 것입니다. 이는 서버 부하 등의 문제를 일으키는 원인이 됩니다. 대신 SSR 방식은 SEO(Search Engine Optimization / 검색 엔진 최적화)가 가능합니다.

 

반면에 CSR 방식은 브라우저에서 HTML(UI)을 만들 때, 데이터를 제외한 UI 코드만을 프론트 서버에서 받아옵니다. 그리고 데이터가 필요할 때 클라이언트에서 서버에 요청하여 필요한 정보만을 받습니다. 따라서 CSR 방식은 SSR 방식에 비해 서버 부하가 덜합니다. 단, CSR 방식은 초기 진입 속도가 느리다는 단점이 있습니다. (자세한 설명은 아래 ChatGPT 답변을 참고해주세요) 또한, 초기 HTML에 데이터가 없기 때문에, 검색 엔진이 해당 페이지에서 정보를 제대로 수집하지 못할 수 있으므로 SEO(Search Engine Optimization / 검색 엔진 최적화)에 취약합니다.

 

☝🏻 Q. CSR과 SSR의 초기 진입 속도는 어떻게 다른가요? (By ChatGPT)

CSR(Client Side Rendering)과 SSR(Server Side Rendering)의 초기 진입 속도는 기본적으로 다릅니다.

CSR은 초기 페이지 요청 시 서버에서는 HTML 문서와 (클라이언트에서 데이터를 로드하고 렌더링하는 로직이 포함된) JavaScript 파일을 클라이언트로 전달합니다. 이후, 클라이언트는 JavaScript 파일을 실행하여 데이터를 로드하고 렌더링합니다. 이 과정은 초기 진입 속도가 느릴 수 있으며, 특히 첫 번째 페이지 로딩 시간이 길어질 수 있습니다. 클라이언트는 서버에서 전달받은 데이터를 사용하여 동적으로 페이지를 렌더링하므로, 사용자가 상호작용하는 동안에는 페이지 갱신이 빠르게 이루어질 수 있습니다.

반면 SSR은 초기 페이지 요청 시 서버에서 데이터를 미리 렌더링하여 완성된 HTML 문서로 전달합니다. 클라이언트는 이미 완성된 HTML을 받아 즉시 렌더링할 수 있으므로 초기 진입 속도가 빠릅니다. 사용자는 초기 페이지를 더 빠르게 볼 수 있지만, 동적인 변화가 있는 경우 서버에 요청을 보내고 새로운 HTML을 받아와야 하므로 사용자 경험의 지연이 발생할 수 있습니다.

따라서, CSR은 초기 페이지 로딩이 오래 걸리지만 상호작용 시 부드럽고 빠른 경험을 제공할 수 있으며, SSR은 초기 페이지 로딩이 빠르지만 동적인 변화가 있는 경우 지연이 발생할 수 있습니다. 각각의 장단점을 고려하여 프로젝트의 요구사항과 성능 목표에 맞는 렌더링 방식을 선택하는 것이 중요합니다.

 

---

어떤 방식을 사용할 것인가

어떤 웹앱이든 CSR 방식 혹은 SSR 방식으로 개발할 수 있습니다. 단지 어떤 방식이 더 효과적인지는 그 앱의 성격에 따라 달라질 수 있습니다. 따라서 결국 개발자의 역할이 제일 중요해지는데, 개발자는 웹앱을 개발할 때 어떤 방식이 더 적합한지를 잘 고려해서 선택하여야만 잘못된 선택에 따른 비효율을 예방할 수 있습니다.