웹페이지 렌더링 방식은 웹 애플리케이션의속도와 효율성을 높여 사용자 경험(UX)을 개선하기 위해 발전해 왔다. 대표적으로CSR(Client-Side Rendering),SSR(Server-Side Rendering),SSG(Static Site Generation)세 가지 렌더링 방식이 등장했고 각 방식은 사용자에게 페이지를 제공하는 과정에서의 차이점을 가지고 있으며, 각각의 장단점이 있다. 이러한 차이점과 각 방식의 특징을 자세히 알아보도록 하자.
렌더링 방식의 변화
과거의 웹 애플리케이션은정적 렌더링 방식을 사용하여, URL에 요청이 오면 해당하는정적 HTML 파일을 전달하는 형식이였다. 이런 방식은페이지를 단순하게 제공하는 데에 적합하지만, 페이지 내부의 콘텐츠를 동적으로 변경하거나 유연하게 유지하기 어려운 단점이 있다.
Nginx나Apache와 같은 서버에서도 정적 렌더링이 지원되지만, 이 방식은요청이 들어올 때마다 서버가 정적인 HTML 파일을 제공하기 때문에동적 컨텐츠 변경이 어려운 한계를 가지고 있다.
이 문제를 해결하기 위해AJAX와 같은 비동기 기술이 등장했고, 서버와 클라이언트 간에 데이터를 주고받아페이지 일부만 갱신하는 것이 가능해졌다. 이를 바탕으로 gmail, Google Maps와 같이 SPA (Single Page Application)이 개발되었다.
SPA(Single Page Application)간단히 말해 한 페이지 내에서 필요한 데이터를 서버에서 받아와 부분적으로만 업데이트 하는 방식
![SPA 예) 네이버 지도]
SPA 예) 네이버 지도
CSR (Client Side Rendering)
Client-Side Rendering의 약자로,클라이언트 측에서 모든 렌더링을 수행하는 방식이다. CSR은 클라이언트가 최초로 서버에서 HTML을 요청하면, 빈 HTML과 함께JS 파일을 전달받고이를 클라이언트에서 실행하여 렌더링한다.
위 그림은 CSR의 단계를 그림으로 만들어 보았다
클라이언트가 페이지 요청 → 서버는 JS 링크가 포함된 HTML 파일을 전송
클라이언트는JS 파일을 다운로드하고 실행해 빈 화면을 렌더링 후 콘텐츠를 로딩
필요한 데이터를 JSON으로 받아와동적 HTML 생성
장점
동적 페이지 전환이 빠르고 부드러움
클라이언트 측에서 데이터 관리및 처리 용이
단점
Initial Loading may take too long
서버로부터 받아야 할 데이터가 많으면 첫 화면을 보기까지 시간이 많이 걸릴 수 있다
Low SEO (Search Engine Optimization)
구글 네이버 같은 검색 엔진은 서버에 등록된 웹사이트의 html을 분석해 검색 결과에 반영한다. 근데 CSR로 받은 html은 텅텅 비어있어 판단하기 어려워지는 문제점이 있음.
적합한 서비스
대화형 웹 애플리케이션
CSR은동적인 데이터 업데이트가 빈번하고 사용자가클릭과 페이지 전환을 빠르게수행하는 웹 애플리케이션에 적합하다.
예시 사이트: Facebook, Twitter, Gmail
이유: CSR은 페이지를 처음 로드할 때만 시간이 걸리지만, 이후에는 데이터를 비동기로 받아와 필요한 부분만 업데이트함. Facebook이나 Twitter 같은 SNS에서는 사용자가 빠르게 다양한 콘텐츠를 넘기고 클릭하므로,클라이언트 측에서 데이터 요청을 즉시 처리하는 CSR이 UX에 유리하다.
SSR (Server Side Rendering)
Server-Side Rendering의 약자로, 서버에서 페이지를 렌더링하여완성된 HTML 파일을 클라이언트로 전송하는 방식이다. 페이지 요청이 있을 때마다 서버에서 렌더링 작업을 수행하여 HTML을 제공한다.
장점
CSR을 사용했을 때보다 첫화면 로딩이 빠름
모든 데이터를 다 받지 않아도 첫 화면만 받으면 바로 렌더링이 가능함
효율적인 SEO
모든 콘텐츠가 html에 담겨있어 검색엔진이 판단하기 수월함
단점
Blinking issue, Non-rich site interactive
정적 사이트에서 발생한 화면 전환시 깜빡이는 이슈 존재
좋지 않은 UX
Server side overhead
사용자가 많을수록 서버에 과부하가 걸리기 쉬움
사용자가 클릭을 할 때마다 서버에 요청 → 서버는 HTML 뚝딱뚝딱 만들어야 함
Need to wait before interacting
동적으로 데이터를 처리하는 자바스크립트를 아직 로드 하지 못했을 때 그와 관련된 반응은 없을 수 있음
적합한 서비스
SEO가 중요한 콘텐츠 사이트
SSR은SEO가 중요한 사이트나,즉각적인 초기 로딩이 필요한 경우에 적합하다. 특히, 검색엔진 크롤러가 페이지를 쉽게 인덱싱할 수 있도록 SSR을 통해 완성된 HTML을 제공한다.
예시 사이트: eBay, Medium, Netflix
이유: eBay와 같은 전자 상거래 사이트나 Medium 같은 블로그 사이트에서는 페이지가 검색 결과에 잘 나타나는 것이 중요하다.SSR은 완성된 HTML을 서버에서 전송하여 검색 엔진이 더 쉽게 인덱싱할 수 있도록 돕고, 페이지 로딩 시 즉각적으로 콘텐츠를 보여주기 때문에 사용자 경험도 개선된다.
SSG
Static Site Generation의 약자로, 미리 생성된 정적 HTML 파일을 서버에 배포하는 방식이다. 빌드 단계에서 모든 페이지가 미리 렌더링되며, 요청 시 정적 파일을 제공하는 방식으로 동적 콘텐츠 업데이트가 빈번하지 않은 사이트에 유리하다.
장점
빠른 로딩시간
서버 부하 적음
SEO 유리
단점
동적 업데이트 어려움
컨텐츠 업데이트 어려움
적합한 서비스
정적 콘텐츠가 많은 사이트
SSG는고정된 콘텐츠가 주를 이루고페이지의 빈번한 업데이트가 필요하지 않은 사이트에 적합하다. 정적 파일로 미리 생성된 페이지를 배포함으로써 빠르게 콘텐츠를 제공할 수 있다.
예시 사이트: 마케팅 랜딩 페이지, 블로그 사이트, 개인 포트폴리오
이유: 마케팅 랜딩 페이지나 개인 블로그는 주로 정적인 콘텐츠를 제공하며, 콘텐츠 변경이 적다.SSG는 미리 생성된 HTML 파일을 CDN을 통해 빠르게 제공해 사용자가 페이지를 요청할 때 즉시 응답할 수 있도록 한다. 특히, 트래픽이 많은 블로그의 경우 CDN 배포로 서버 비용을 절감할 수 있다.
