렌더링 방식에 대한 짧은 정리

웹을 공부하다보면 렌더링에 대해 들어본 적이 있을겁니다.

 

웹에서 렌더링(Rendering)은 웹 페이지의 내용을 브라우저 화면에 표시하는 과정을 말하는데, 우리가 javascript나 css로 구현한 함수를 실제 브라우저에 보여질 수 있도록 하는 과정으로 이해하면 되겠습니다.

 

그래서 우리는 사용자에게 좋은 사용자 경험을 제공하기 위해 어떻게 하면 렌더링을 효율적으로 처리할지 고민이 필요합니다.

특히 데이터 양이 많은 페이지(ex. 고화질의 이미지 또는 영상이 다수 포함된 페이지)의 경우 더 깊은 고민이 필요할 겁니다.

웹 개발에서 사용되는 주요한 렌더링 방식은 서버 사이드 렌더링 (Server-Side Rendering, SSR)과 클라이언트 사이드 렌더링 (Client-Side Rendering, CSR)으로 나눌 수 있습니다.

 

서버 사이드 렌더링 (Server-Side Rendering, SSR)은 말 그대로 서버에서 HTML을 완전히 렌더링 한 후 클라이언트에 화면에 보여질 내용만 전달하는 렌더링 방식입니다.

• 장점:
  • 초기 로딩 속도: 서버에서 HTML을 완전히 렌더링한 후 클라이언트에게 전달하기 때문에 초기 로딩 속도가 빠르고, 검색 엔진 최적화(SEO)에 유리합니다.
  • 자바스크립트 비종속성: 클라이언트의 브라우저에서 자바스크립트를 실행하지 않아도 기본 콘텐츠를 볼 수 있습니다.
  • 보안: 클라이언트에서 민감한 데이터를 직접 처리하는 것보다 서버에서 처리하므로 보안성이 높을 수 있습니다.
• 단점:
  • 서버 부하: 매 요청마다 서버에서 페이지를 렌더링해야 하므로 서버의 부하가 증가할 수 있습니다.
  • 사용자 경험: 초기 로딩 후에도 페이지 갱신이 발생하면 서버 요청이 필요하므로 사용자 경험이 상대적으로 느릴 수 있습니다.

 

클라이언트 사이드 렌더링 (Client-Side Rendering, CSR)은 SSR과 달리 데이터를 클라이언트에서 처리하는 방식입니다. 데이터에 따른 동적 화면을 구현해야할 경우 CSR이 유리할 수 있습니다. 

• 장점
  • 빠른 상호작용: 페이지 로딩 후에 자바스크립트를 사용하여 동적으로 데이터를 가져와 렌더링하므로 상호작용이 빠르고 부드러운 사용자 경험을 제공할 수 있습니다.
  • 서버 부하 감소: 서버에서는 단순히 데이터를 제공하고 클라이언트에서 렌더링을 처리하므로 서버 부하가 상대적으로 줄어듭니다.
• 단점
  • 초기 로딩 속도: HTML을 가져온 후에 자바스크립트를 로드하고 실행해야 하므로 초기 로딩 속도가 상대적으로 느릴 수 있습니다.
  • SEO 문제: 초기 페이지 로딩 시에 검색 엔진이 페이지 콘텐츠를 인식하지 못할 수 있습니다. 추가적인 조치가 필요한 경우가 있습니다.

사실 이들은 개념적인 내용이라 실제 개발에서는 둘 중 하나의 방식만 채택하여 사용할 필요는 없습니다. 데이터의 양이 너무 많은 경우에는 서버사이드에서 렌더링을 해줄 수도 있고, 데이터의 동적처리가 필요한 경우 클라이언트에서 렌더링을 하는게 유리할 수 있습니다.

그래서 상황에 맞게 개념들을 잘 활용하는 것이 중요합니다.

 

추가적으로 SPA라는 개념에 대해서 간단히 정리하고 넘어가겠습니다.

SPA(Single-Page Application)는 클라이언트 사이드 렌더링 방식 중 하나로 최근 React, 와 같은 framework을 활용하여 프론트 사이드 동적 렌더링을 더욱 효과적으로 구현하는 방식입니다.

SPA 방식은 초기에 HTML, CSS, JavaScript 파일을 한 번에 로드하고, 필요한 데이터만 비동기적으로 서버에서 가져와 동적으로 페이지를 렌더링하게 됩니다. 이렇게 되면 서버 또는 클라이언트에서 페이지를 이동시키지 않고, 한 페이지 안에서 데이터만 교체하는 방식으로 렌더링을 하기 때문에 Single Page라는 이름이 붙게 된 것입니다.

기본적인 장단점은 CSR과 비슷하지만 SPA 방식을 활용하면, 서버와 클라이언트의 역할이 더욱 명확히 나눠질 수 있으며, 서버 또는 클라이언트에서 모든 렌더링을 한 번에 처리할 필요가 없기 때문에 리소스를 효율적으로 관리할 수 있다는 장점이 있습니다.

최근 React, Vue.js와 같은 프레임워크(또는 라이브러리)를 활용할 때 이러한 SPA 방식이 많이 활용되고 있습니다.

클라이언트 측에서 뷰(View)와 데이터 상태(State)를 관리하여, 필요한 데이터만 서버에서 비동기적으로 가져와 화면을 구성하게 됩니다.

 

이상으로 간단히 웹 렌더링 방식에 대해 알아보았습니다.

최근 웹 프론트 기술이 다양하게 등장하고, 트렌드도 빠르게 변화하다보니 학습할 내용도 많고,

브라우저에 대한 이해도 높아야할 것 같습니다.

 

틈틈히 이러한 개념들을 정리해보도록 하겠습니다.