웹페이지를 브라우저에서 렌더링하는 방식에는 크게 두 가지, CSR (Client-Side Rendering)과 SSR (Server-Side Rendering)가 있습니다. 이 두 방식은 사용자에게 웹페이지를 어떻게 제공하는지에 대한 핵심적인 차이를 보입니다. 이 포스트에서는 CSR과 SSR의 개념, 작동 방식, 장단점을 통해 두 기술을 살펴보겠습니다.

해당 포스트에서 언급하는 렌더링은 웹 브라우저에서 HTML을 이용해 실제 사용자 인터페이스를 그리는 과정을 뜻하는 것이 아니며, 서버 혹은 클라이언트 단에서 템플릿 엔진이 HTML을 생성하는 것을 의미합니다.

CSR (Client-Side Rendering)

CSR은, 말 그대로 클라이언트 측에서 웹페이지를 렌더링하는 방식을 의미합니다. 사용자가 웹사이트에 요청을 보내면 서버는 HTML 파일과 JavaScript 파일을 클라이언트에게 보냅니다. 클라이언트의 브라우저는 이 파일을 사용하여 웹페이지를 구성하고 렌더링합니다.

CSR 작동 방식

출처 : https://www.solutelabs.com/blog/client-side-vs-server-side-rendering-what-to-choose-when

1. 사용자가 웹사이트를 요청합니다.
2. 이 요청은 CDN(Content Delivery Network)에 도달합니다.
3. CDN은 HTML 파일과 JavaScript에 대한 링크를 클라이언트로 전송합니다. 클라이언트는 HTML을 먼저 다운로드하고 이후 JavaScript를 다운로드합니다. 이때, SSR과 달리 사용자는 아직 웹페이지를 볼 수 없습니다.
4. 브라우저는 JavaScript를 다운로드 합니다.
5. JavaScript 파일이 완전히 다운로드되면, 해당 JavaScript가 실행됩니다. 이는 필요한 데이터를 서버에 요청하는 API를 호출하게 됩니다. 이 단계에서 사용자는 화면에 placeholder(데이터가 로드될 공간)를 보게 됩니다.
6. 이제 서버는 API 요청에 응답하여 필요한 데이터를 제공합니다.
7. 클라이언트는 이 데이터를 받아 placeholder에 채워넣습니다. 이제 웹페이지는 완전히 로드되어 사용자와 상호작용이 가능해집니다.

CSR의 장점

• 서버 부하 감소 : 모든 렌더링 작업이 클라이언트에서 이루어지므로 서버 부하가 감소합니다.
• 사용자와의 상호작용에 좋음 : 브라우저에서 직접 렌더링을 수행하기 때문에 동적인 사용자 인터페이스를 쉽게 구현할 수 있습니다.

CSR의 단점

• 초기 로딩 시간이 길 수 있음 : 모든 자원을 다운로드 받아야 하기 때문에 초기 로딩 시간이 길어질 수 있습니다.
• SEO 문제 : 웹 크롤러가 JavaScript를 완전히 해석하지 못하는 경우 페이지의 내용을 제대로 인식하지 못할 수 있습니다. (이 내용을 다른 포스트에서 추가로 다룰 예정입니다.)

참고 : Google Web Fundamentals – JavaScript Start-up Optimization

SSR (Server-Side Rendering)

반면에, SSR은 서버에서 웹페이지를 렌더링하는 방식입니다. 사용자가 웹사이트에 접속 요청을 보내면, 서버는 해당 요청에 맞는 HTML을 렌더링하고 이를 클라이언트에게 보냅니다. 클라이언트는 받은 HTML을 그대로 화면에 표시합니다.

SSR 작동 방식

출처 : https://www.solutelabs.com/blog/client-side-vs-server-side-rendering-what-to-choose-when

1. 사용자가 웹사이트를 요청합니다.
2. 이번에는 서버가 중요한 역할을 합니다. 서버는 ‘렌더링 준비가 된’ HTML 파일을 생성합니다. 이는 서버가 모든 리소스를 확인하고 필요한 HTML 컨텐츠를 컴파일하여 만들내는 과정을 말합니다.
3. 클라이언트에게 전송되는 HTML은 이미 렌더링이 준비된 상태이므로, 클라이언트는 이를 즉시 화면에 렌더링합니다. 그러나 이 시점에서는 JavaScript가 아직 로드되지 않았으므로, 사이트는 아직 사용자 조작이 불가능합니다.
4. 클라이언트는 이제 JavaScript를 다운로드합니다.
5. JavaScript가 다운로드되는 동안, 사용자는 컨텐츠는 볼 수 있지만 사이트를 조작할 수는 없습니다. 이때 사용자의 조작은 저장되어 있다가 이후에 처리됩니다.
6. 브라우저는 다운로드된 JavaScript를 실행합니다.
7. 이제 JavaScript도 성공적으로 컴파일되었으므로, 이전에 저장된 사용자 조작이 실행됩니다. 웹 페이지는 이제 완전히 상호작용 가능한 상태가 됩니다.

SSR의 장점

• 초기 로딩 시간이 짧음 : 필요한 HTML만 받아서 화면에 표시하면 되므로 초기 로딩 시간이 짧습니다.
• SEO 향상 : 웹 크롤러가 HTML을 바로 인식할 수 있어서 검색 엔진 최적화(SEO)에 유리합니다.

SSR의 단점

• 서버 부하 증가 : 모든 요청마다 새로운 HTML을 렌더링해야 하므로 서버 부하가 증가할 수 있습니다.
• 사용자와의 상호작용에 제약: 모든 페이지 변경 요청마다 서버에 요청을 보내고 응답을 기다려야 하므로 사용자 경험에 제약이 생길 수 있습니다.

참고 : Google Search Central – Understand the JavaScript SEO basics