[정보관리 기술사] 웹페이지 구성 및 Rendering기법

웹페이지 구성방식의 변화

웹페이지 구성방식은 크게 MPA(Multi Page Application)와 SPA(Single Page Application) 방식으로 구분할 수 있다. 초기 Transaction Page 구성시에는 새로운 탭/페이지를 이동할 때마다 새로운 HTML을 서버에서 받아와서 페이지를 새로 구성하는 MPA방식을 대부분 사용하지만 이후 시간이 지날수록 받아와야 하는 이미지와 데이터 용량이 증가하여 속도 이슈가 발생하였고, 이를 해결하기 위한 방법으로 하나의 페이지로 구성되어 필요시 변하는 특정 영역에 대한 데이터만 변경하는 SPA방식을 최그에 사용하게 되었다

MPA(Multi Page Application)와 SPA(Single Page Application) 두 가지 방식은 사용자 경험과 속도 측면에서 명확한 차이점을 보유하고 있다

 

MPA(Multi Page Application)는 오랜 역사로 인해 다양한 자료들이 있고 SEO에 유리한 반면에 다른 페이지로 이동시 새로고침, 깜빡거림등이 발생하며, 요청이 들어올때마다 페이지를 새로 로딩해야 해서 속도가 느리며, Front-end와 Back-end에 대한 이해가 모두 필요하다. 

SPA(Single Page Application)는 유연한 UI를 구성할 수 있어 뛰어난 반응성을 가지며, Front-end와 Back-end를 분리할 수 있고 전체적인 네트워크 트래픽을 줄있수 있지만, 초기 페이지 로깅 시간이 느리고 SEO 노출이 어려우며 JavaScript를 필수적으로 사용해야 하는 단점이 있다.

 

 

Rendering기법의 변화

HTML을 입력받아 페이지를 구성하고 출력하는 Rendering기법은 Client와 Server중 어느쪽에서 Rendering을 하는지에 따라서 크게 SSR(Server Side Rendering)과 CSR(Client Server Rendering)의 2가지 방식으로 나뉜다. 

일반적으로 웹페이지 구성방식의 특성상 SPA(Single Page Application)에서는 CSR(Client Server Rendering)방식을 사용하고, MPA(Multi Page Application)에서는 SSR(Server Side Rendering)방식을 사용한다.

웹페이지 구성방식과 동일하게 Rendering기법도 장단점이 명확해서 두 기업의 장단점을 합칠 수 있는 방법이 모색되었으며 이를 Unersal Server Side Rendering이라고 한다. Universal Server Side Rendering은 CSR과 SSR방식의 장점을 모아 첫 요청시에는 SSR로 완성된 HTML을 서버에서 클라이언트로 보내서 SEO가 가능하고 초기 Rendering 속도를 높이고, 이후 변동에 대해서는 Client에서 Rendering을 수행해 페이지 이동시의 빠른 속도의 장점을 얻을 수 있는 방식이다.

좀 더 세부적으로 Rendering 유형을 나누면 아래와 같이 5개 유형으로 구분할 수 있다.

 

 

Server Side Rendering(SSR)

Server Side Rendering (SSR)은 웹 애플리케이션의 렌더링 방법 중 하나로, 서버 측에서 렌더링하여 HTML 페이지를 생성하는 방식입니다.

SSR은 초기 로딩 시 클라이언트 측에서 JavaScript 파일을 다운로드하고 실행하여 HTML을 생성하는 CSR 방식과는 달리, 서버 측에서 렌더링하여 HTML 페이지를 생성합니다. 이 방식은 초기 로딩 속도를 늦출 수 있지만, 검색 엔진 최적화(SEO)에 이점이 있으며, 웹 페이지의 렌더링 속도를 개선할 수 있습니다.

SSR은 React와 같은 클라이언트 측 JavaScript 라이브러리를 사용하여 작성된 웹 애플리케이션에서도 사용할 수 있습니다. 이를 위해 React는 서버 측에서도 렌더링될 수 있는 방법을 제공하며, SSR 구현을 간단하게 할 수 있도록 도와줍니다. SSR 기능을 제공하는 프레임워크로는 Next.js와 Nuxt.js 등이 있습니다.

SSR은 초기 로딩 시간을 늦출 수 있지만, 검색 엔진 최적화(SEO)에 이점을 가져올 수 있으며, 웹 페이지의 사용자 경험을 개선할 수 있습니다. 따라서 SSR은 웹 애플리케이션의 목적과 요구 사항에 따라 선택할 수 있는 렌더링 방법 중 하나입니다.

 

Client Server Rendering(CSR)

Client Server Rendering은 웹 애플리케이션의 렌더링 방법 중 하나로, 클라이언트 측에서 렌더링하는 방식이다.

CSR은 초기 로딩 시에는 서버 측에서 HTML 페이지를 생성하지만, 이후에는 클라이언트 측에서 JavaScript 파일을 다운로드하고 실행하여 웹 애플리케이션을 렌더링한다. 이 방식은 초기 로딩 시간이 빠르지만, 웹 페이지의 렌더링 속도가 느릴 수 있으며, 검색 엔진 최적화에도 불리할 수 있다.

CSR은 React와 같은 클라이언트 측 JavaScript 라이브러리를 사용하여 작성된 웹 애플리케이션에서 많이 사용됩니다. 이를 위해 React는 클라이언트 측에서 렌더링될 수 있는 방법을 제공하며, 이를 통해 CSR을 구현할 수 있다.