웹 브라우저 렌더링 방식에는 여러가지 방법들이 존재합니다.
오늘은 그 중 대표적인 방법들 몇가지에 대해서만 알아보겠습니다.
1. 클라이언트 사이드 렌더링 (Client Side Rendering)
1-1. CSR 이란?
- 클라이언트가 웹 화면을 그리는 주체가 된다.
- 모바일의 수요와 환경이 폭발적으로 증가함에 따라 모바일 웹브라우저에 대한 접근과 니즈가 증가하였고, PC보다 사양이 부족한 모바일 환경에 맞추어 기존과는 다른 접근방식으로 등장한 SPA가 등장하게 되었다.
- 관련 프레임워크 ex) React.js, Angular.js, Vue.js
1-2. CSR 방식의 렌더링 과정
- 페이지를 처음 로딩할때 서버는 index.html 파일을 클라이언트에 전달
- 전달받은 index.html파일 안에는 어플리케이션에 필요한 자바스크립트의 링크만 존재한다.
- HTML의 빈 부분은 서버로부터 app.js 파일을 다운로드 받게 되는데, 어플리케이션에서 필요한 로직들을 포함하여 프레임워크, 라이브러리도 포함되어 있다. 이때 유저는 빈 화면만을 보게됨
- 다운로드가 완료괸 JS파일이 실행되고, 데이터를 요청하기 위한 API가 호출된다. 이때 사용자들은 placeholder (예 : skeleton UI)를 보게됨
- 서버에서 API 요청에 응답하여 데이터를 전송한다.
- 클라이언트는 API에서 받아온 데이터를 placeholder 자리에 넣어주고, 상호작용이 가능한 페이지가 된다.
1-3. CSR 방식의 장단점
1-3-1. 장점
- 동적인 웹 앱에서 이상적이다.
- 첫 로드 이후에 페이지 렌더링이 빠르다.
- 애플리케이션의 반응성이 빠르게 개선되어 사용자와의 상호작용이 부드럽다.
- CSR 구현에 최적화된 JS 라이브러리가 다양하다
1-3-2. 단점
- 검색 엔진 크롤러가 페이지 내용을 인식하기 어려워 SEO에 적합하지 않다.
- 클라이언트 측에서 페이지를 렌더링하여 API 응답 속도가 느리다.
- 첫 페이지 로딩이 오래 걸린다.
- 추가적인 외부 라이브러리를 필요로 한다.
- 메모리 소모량이 크다.
2. 서버 사이드 렌더링 (Server Side Rendering)
2-1. SSR 이란?
- 서버가 웹 화면을 그리는 주체가 된다.
- 관련 프레임워크 ex) Next.js, Flask
- Static Sites 방식에 영감을 얻어 SSR방식이 도입된다.
- 서버에서 필요한 데이터 모두를 가져와서 서버 안에서 html을 만들고, 만들어진 html 파일을 동적으로 제어할 수 있는 소스코드와 함께 클라이언트에 보낸다.
- 클라이언트로 전달된 html문서는 바로 유저에게 보여줄 수 있게 된다.
2-2. SSR 방식의 렌더링 과정
- 사용자가 클라이언트에 요청을 보내게 된다.
- 서버는 리소스를 확인하고 이를 해석하고 변환하는 컴파일링 과정을 통하여 즉시 렌더링 가능한 HTML 파일을 생성한다.
- 클라이언트에 전달되는 순간 이미 렌더링 될 준비가 되어 있으므로 즉시 렌더링 된다. 이때 JS파일은 읽히기 전 이므로 사이트 자체의 조작은 불가능한 상태임
- 클라이언트가 JS파일을 다운받는다. 이때 브라우저에서는 사용자의 조작을 기억하고 있음
- 브라우저가 다운로드된 JS 프레임워크를 실행한다.
- JS까지 성공적으로 컴파일링 된 후에는 기억된 사용자 조작이 실행되고, 상호작용 가능한 페이지가 된다.
2-3. SSR 방식의 장단점
2-3-1. 장점
- 정적인 사이트에서 이상적이다.
- 첫 페이지 접근이 빠르다.
- JS에 의존하지 않는다.
- 크롤링에 용이하여 SEO에 적합하다.
2-3-2. 단점
- 서버 요청이 많이 발생한다.
- 전체 페이지를 다시 로딩해야 해서 CSR에 비해 페이지 로드 속도가 느리다.
- 사용자와 사이트 간의 상호작용이 부드럽지 못하다.
- 서버에서 사용자 요청을 처리하여 보안 취약점에 노출될 가능성이 높다.
주의할 점
전통적인 웹 페이지 방식(Static)은 SSR이 아니다. { Traditional != SSR }
싱글 페이지 어플리케이션(Single Page Application) 은 CSR이 아니다. { SAP != CSR }
전통적인 웹 페이지 방식이 SSR 방식 안에 속하는 것이고, SPA가 SCR 방식 안에 속하는 것이다.
짚고 넘어가야 할 부분 (MPA - Multi Page Application 와 SPA - Single Page Application)
MPA - Multi Page Application
- 고전적인 웹 페이지 구성 방식으로, 여러 개의 페이지로 구성된 웹을 의미한다.
- 페이지 별로 해당 페이지에 맞는 HTML, CSS, JS 파일을 받아 화면을 구성한다.
- 하이퍼링크를 클릭했을 때 해당 페이지로 이동하고, 화면이 깜빡이면서 새로운 페이지에 맞는 화면이 그려지는 방식이다.
- 이미 하드코딩된 정적 페이지들을 서버에서 개별적으로 가지고 있다가 요청에 따라 해당 요청에 상응하는 정적 페이지를 찾아 반환한다.
- 렌더링이 서버 사이드에서 완료되어 최종 완성된 문서를 반환하고 있는 형태!
- 사용자가 페이지를 새로고침하거나 다른 페이지로 이동할 때마다 해당 페이지의 HTML 문서를 서버로부터 다시 받아와야 한다.
- 이때의 HTML 문서는 사진과 같은 컨텐츠들이 이미 포함된, 서버가 렌더링한 파일이다.
- MPA는 SSR 렌더링 방식을 사용한다.
SPA - Single Page Application
- 단일 페이지 애플리케이션
- 현재의 페이지를 동적으로 작성함으로써 사용자와 소통할 수 있는 웹 애플리케이션
- 최초 한 번 페이지 전체를 로딩한 뒤 데이터만 변경하여 사용할 수 있는 애플리케이션
- 어떤 페이지에 접속하더라도 동일한 HTML, CSS, JS 파일로 접속한 페이지에 맞게 화면을 구성한다.
- 연속되는 페이지 간의 UX를 향상시키고, 웹 애플리케이션이 데스크톱 애플리케이션처럼 동작하도록 돕는다.
