브라우저 렌더링이란
브라우저가 서버로부터 요청해 받은 내용을 브라우저 화면에 표시해주는 작업.
즉, 브라우저가 서버로부터 HTML, CSS, JavaScript 문서를 전달받아 브라우저 엔진이 각 문서를 해석해 브라우저 화면을 그려주는 것.
예시로, 크롬 브라우저에 접속해 주소창에 www.naver.com을 입력한다면 브라우저는 naver 서버로 부터
naver 웹 사이트에 대한 정보를 받아 브라우저 화면에 naver 홈페이지를 그려주게 되는것이다.
이러한 브라우저 렌더링을 크게 "클라이언트 사이드 렌더링" 과 "서버 사이드 렌더링" 방식으로 나누어진다.
클라이언트 사이드 렌더링이란(CSR)
- CSR은 클라이언트인 브라우저가 렌더링을 처리하는 방식.
즉, 서버에서 받은 데이터를 통해 클라이언트인 브라우저가 화면을 그리는 주체가 되는것. - SPA(Single Page Application) 기법과 함께 CSR 방식이 각광받기 시작하였다.
CSR은 두가지 형태의 요청이 존재한다.
최초 요청 시에는 사이트의 모든 HTML 정보가 포함된 리소스를 받는다.
이후엔 데이터만 서버로 요청하여 최초 다운로드된 HTML 템플릿과 결합된 내용을 화면에 렌더링 하게 됨.
화면에 보여줄 내용을 클라이언트에서 정하게 되는것이라서 클라이언트 사이드 렌더링이라 불린다.
서버 사이드 렌더링이란(SSR)
- 과거 거의 모든 웹 사이트는 SSR로 구축 되었다.
Browser가 URL을 통해 서버로 요청을 하면 서버는 요청에 맞는 화면(HTML)에 데이터가 덧붙은 상태의 완성된 HTML을 response 하였고. 화면에 렌더링 하기 위한 내용을 서버에서 만들었기 대문에 서버 사이드 렌더링이라고 불리게 되었다.
서버 사이드 렌더링(SSR) vs 클라이언트 사이드 렌더링(CSR)
둘의 장점과 단점은 무엇인가.
클라이언트 사이드 렌더링은 초기 접속시 HTML 템플릿을 다운받기 때문에 초기에 받아야 할 용량이 큰 편이다.
적게는 몇 MB ~ 수십 MB까지 리소스가 얼마나 포함되었는지에 따라 사이즈가 커질 수 있다.
그러나 이후에는 화면에 필요한 데이터만 서버로부터 받으면 되기 때문에 빠른 화면 갱신이 가능하다.
사용 할 때 중요한점은 불피요한 중복 다운로드가 발생하지 않도록 리소스 캐싱이 매우 중요하다.
반대로 서버 사이드 렌더링은 요청하는 화면에 대한 내용만 받으면 되기 떄문에 초기에 받아야 할 용량이 매우 크지는 않다.
그러나 매 요청시마다 HTML과 데이터가 결합된 응답이 오기때문에 갱신이 빠르지않다.
초기에 받는 용량이 크지않지만 반복 이용할 경우 데이터 총량은 꽤 큰편
그럼 언제 서버 사이드 렌더링(SSR)을 언제 클라이언트 사이드 렌더링(CSR)을 사용해야 하는가
*최초 접속시나 배포시에는 서버 사이드 렌더링(SSR) 방식이 유리하고
- 은행 사이트 같이 몇 개의 화면만 잠깐 이용 하는 사이트
*개별 화면을 호출 할떄는 클라이언트 사이드 렌더링(CSR)이 유리하다 - 트위터 / 페이스북 처럼 많지않고 오래 이용하게 되는 사이트
더 이어가려면 MPA (Multi Page Application) vs SPA (Single Page Application)를 알아보자
MPA (Multi Page Application)
새로운 페이지 요청마다 정적리소스를 다운,
그에 맞춰 전체 페이지 리렌더링 된다. ( 즉 SSR방식 )
인터넷 주소창에 주소를 입력하거나 링크를 클릭하는 등의
사용자가 어떠한 요청시, 그에 맞는 완전한페이지를 받아오고 리렌더링 된다.
장점 : SEO(Search Engine Optimization) 검색엔진 최적화 관점에서 유리하다.
단점: 새로운 페이지로 이동시에 서로 렌더링되기때문에 깜빡거린다.
프론트 엔드와 벡엔드가 밀접하게 관계가 연결되어 개발이 복잡해질 가능성이 높다.
SPA (Single Page Application)
웹 애플리케이션 필요한 모든 정적 리소스를 최소 한번만 다운로드.
그 이후, 새로운 페이지에 대한 요청이 때마다 페이지갱신에 필요한 데이터만 전달받고 그 정보를 기준으로 페이지를 갱신한다.
( CSR 방식 렌더링 )
SPA를 만드는데 사용되는 프레임워크 React, Vue등이 있다.
장점: 앞서 MPA와 달리 깜빡거림이 없고 반응속도가 좋다.
로컬 데이터를 효과적으로 캐싱할 수도 있다.
단점: 초기 구동 속도가 느리고, SEO에 불리하다는 것이다.
