웹 페이지 렌더링 방식 - CSR / SSR / SSG

초창기 웹 렌더링 방식과 Ajax의 등장

모든 웹페이지는 정적인 페이지였다. 변화가 있을 때마다 서버로부터 새로운 HTML을 전송받아 다시 렌더링을 해야 했고, 이는 성능적 문제와 부정적인 사용자 경험의 이슈가 있었다.

 

그 후, 자바스크립트를 통해 비동기적으로 데이터를 주고 받는 Ajax가 등장했고, 전체 페이지를 리렌더링하지 않고 필요한 부분의 데이터만 불러와 웹 사이트 화면을 동적으로 변경할 수 있게 되었다. 기존에 서버에서만 이루어지던 다야한 로직 처리나 HTML 생성을 상당수 클라이언트(브라우저)에서 처리할 수 있게 되었다.

 

현재는 React, Angular, Vue 등의 다양한 프레임워크 사용으로 웹을 보다 쉽게 구축할 수 있게 되었다.

 

CSR(Client Side Rendering)

React와 같은 프레임워크들이 인기를 얻으며 브라우저(클라이언트)에서 전적으로 웹 렌더링을 책임지는 방식이 보편화되었다. 서버(프론트엔드 프로그램)에서 아무 내용 없는 빈 HTML 껍데기를 보내면 클라이언트(브라우저)에서 동적으로 태그들과 스타일을 생성해 페이지를 채운다. 이런 경우 최초에 HTML을 받는 것 외에 페이지 렌더링을 위해 별도 HTTP 통신을 할 필요가 없어진다. 이런 방식을 SPA(Single Page Application)이라고 한다.

 

🙂 장점

• 초기 로딩 이후 구동 속도가 빠르게 렌더링되기 때문에 사용자 경험(UX)이 좋다.
• TTV(Time To View)와 TTI(Time To Interact) 사이 간극이 없다.
• 서버에게 요청하는 횟수가 훨씬 적기 때문에 서버에 부담이 덜하다.

🙁 단점

• 모든 스크립트 파일이 로드될 때까지 기다려야 하기 때문에 초기 로딩 속도가 느리다.
• 검색엔진의 검색 봇이 크롤링을 하는데 어려움을 겪기 때문에 검색엔진 최적화(Search Engine Optimization)에 불리하다.

 

---

 

SSR(Server Side Rendering)

정적인 페이지에서는 SSR이 전혀 필요가 없지만 useQuery처럼 통신이 들어가는 동적페이지 같은 경우에는 서버사이드 렌더링이 없으면 안의 내용이 텅텅 비어있게 된다. 그걸 채워주기 위해 미리 데이터까지 받아서 제공해주는 서버사이드 렌더링이 있다. 또한 상품 상세보기 같은 동적 라우팅이 되는 페이지에서 openGraph를 적용해줄때, 검색엔진 최적화를 위해 SSR이 필요하다.

 

클라이언트(브라우저)가 서버(프론트엔드 프로그램)에 페이지를 요청하면 서버가 필요한 데이터로 HTML을 구성하여 브라우저에 전송하고, 브라우저에서 응답 받은 HTML을 그대로 렌더링해준다. 사용자가 페이지를 요청할 때마다 서버로부터 완전하게 구성된 HTML을 받아와 페이지 전체를 렌더링하는 어플리케이션 MPA(Multiple Page Application)이 사용하는 렌더링 방식이 SSR이다.

 

🙂 장점

• 초기 로딩 속도가 빠르기 때문에 사용자가 컨텐츠를 빨리 볼 수 있다.
• 검색엔진 최적화(SEO)에 유리하다.

🙁 단점

• 서버로부터 매번 페이지를 전달 받기 때문에 서버에서 페이지를 생성하는 시간이 소요된다.
• TTV과 TTI 사이 간극이 있다. (클릭과 실행이 시간이 걸린다.)
• 서버에 매번 요청을 하기 때문에 서버의 부하가 커질 수 있으며 서버 비용도 많이 든다.

 

---

 

SSG(Static Site Generation)

회사 소개 페이지 같은 정적 페이지의 경우는 모든 유저에게 항상 동일한 화면이 보이기 때문에 한번만 생성한 이후에 어딘가에 저장해두고 필요할 때마다 로드해도 된다. 이러한 방식을 SSG라고 한다. SSG는 SSR과 CSR을 동시에 쓸 수 있게 하는 것이다.

React에 Next.js나 Gatsby.js 등의 도움을 빌려 아주 쉽게 정적 페이지를 생성할 수 있다. 정적 웹페이지를 빌드한 후 결과물을 CDN으로 배포하면 필요할 때마다 CDN으로부터 전달받은 정적 페이지를 유저에게 빠르게 제공할 수 있다.

 

 

참고

웹 렌더링 방식 (CSR, SSR, SSG)