브라우저 렌더링이란 브라우저가 서버로부터 요청해 받은 내용을 현재 브라우저 화면에 보여주는 것을 말한다. 렌더링 방식에는 CSR(Client Side Rendering)과 SSR(Server Side Rendering)로 나누어진다.
렌더링 방식 CSR과 SSR에 대해 알아보기 전에 페이지 구성 방식인 SPA(Single Page Application)와 MPA(Multi Page Application)에 대해 먼저 알아보자
SPA (Single Page Application)
-
Single Page Application의 약자로 한개의 페이지로 구성된 Application 이다.
-
웹 애플리케이션에 필요한 모든 정적 리소스를 최초 한번에 다운로드하고 새로운 페이지 요청이있는 경우 해당 페이지에 필요한 정보만 전달받아서 페이지를 갱신해준다.
-
렌더링 방식은 CSR(Client Side Rendering)
MPA (Multi Page Application)
-
Multi Page Application의 약자로 여러개의 페이지로 구성된 Application 이다.
-
새로운 페이지를 요청할 때마다 정적 리소스가 다운로드 되어 페이지를 이동하나거나 새로고침을 하게되면 전체 페이지를 다시 렌더링한다.
-
렌더링 방식은 SSR (Server Side Rendering)
CSR (Client Side Rendering)
Client Side Rendering의 약자로 클라이언트가 처음 브라우저에 접속할때 HTML파일에 연결된 JS, link등 다운로드한다. 즉 브라우저와 같은 클라이언트에서 렌더링을 수행하는 방식이다.
✅ 장점
-
초기에 이미 모든 문서파일을 다운로드했기 때문에 초기 이후에 로딩 시간이 빠르다.
-
서버가 비어있는 HTML을 넘겨주는 역할을 하기때문에 서버에 부하가 적다.
-
페이지를 빠르고 자연스럽게 렌더링 해주기때문에 UX관점에서 SSR보다 우수하다
❗️ 단점
-
처음 HTML파일에 연결된 모든 문서파일을 다운로드 하다보니 SSR보다 초기 로딩 속도가 느리다.
-
웹 크롤러가 해당 페이지를 탐색했을때 비어있는 HTML이기 때문에 웹사이트에 대한 데이터를 재대로 수집을 못하는 경우가 발생하여 검색엔진최적화(SEO)에 불리하다.
SSR (Server Side Rendering)
Server Side Rendering의 약자로 클라이언트가 서버에 매번 데이터를 요청하여 서버에서 처리하는 방식으로 서버에서 렌더링 준비가 끝난상태로 클라언트에게 전달된다.
✅ 장점
-
필요한 부분만 렌더링 하기때문에 초기 페이지 로딩 속도가 CSR보다 빠르다.
-
렌더링 준비가 끝나 모든 데이터가 HTML에 담긴상태로 브라우저에 전달 되기때문에 웹 크롤러가 탐색할 수 있어 검색엔진최적화(SEO)에 유리하다
❗️ 단점
- 페이지를 이동할때마다 매번 서버에서 필요한 데이터를 생성하고 응답받아야 하므로 생성하는 시간이 걸리기때문에 초기 로딩 이후 페이지 이동할때 속도가 느리다.
References
