임도훈 - 2023년 11월 13일
web frontend rendering브라우저 렌더링(Browser Rendering)
브라우저 렌더링은 웹 페이지를 그려주는 과정이다.
HTML과 CSS 코드를 읽어 웹 페이지의 구조와 스타일을 결합시켜 실제로 화면에 표시를 해준다.
브라우저 렌더링은 크게 2가지로 나눌 수 있는데 각 페이지마다 html/css/javascript를 별도로 가지고 있는 MPA(Multiple Page Application), 단일 페이지로 구성되어 페이지 이동 시 필요한 데이터를 받아와 화면을 보여주는 SPA(Single Page Application)으로 나뉜다.
MPA(Multiple Page Application)
여러개의 페이지로 구성된 어플리케이션으로 새로운 페이지에 접근할 때 서버에서 해당 페이지의 모든 요소(html/css/javascript)를 다운로드하여 페이지를 화면에 보여준다. 따라서 페이지 전환을 할 때 페이지가 리로드되는 현상이 발생한다.
서버에서 웹 페이지를 구성하여 클라이언트로 보내주는 방식이므로 SSR과 연관된 방식이라고 볼 수 있다.
SPA(Single Page Application)
하나의 페이지로 구성된 어플리케이션으로 새로운 페이지에 접근할 때 바뀌는 정보들만 서버에서 받아와 부분적으로 업데이트하여 페이지를 화면에 보여주는 방식이다.
서버에서 빈 페이지와 필요한 정보를 받아 클라이언트에서 렌더링을 하여 화면의 출력해주는 방식이므로 CSR과 연관된 방식이라고 볼 수 있다.
CSR(Client Side Rendering)
서버에서 필요한 데이터를 받아와 클라이언트(브라우저)에서 웹 페이지를 렌더링하는 방식이다.
CSR은 초기 초기 요청 시에는 빈 페이지만을 서버로 부터 받고, 클라이언트 측에서 필요한 데이터를 서버로부터 비동기적으로 요청하여 동적으로 가져온다.
이후 클라이언트는 받아온 데이터를 통해 동적으로 화면을 렌더링하여 화면에 표시한다.
장점
- 웹 페이지 간 이동 시에 매우 빠른 속도로 전환된다.고,
- 페이지를 이동할 때 리로드 되는 현상이 사라져 사용자 경험이 좋아진다.
- 웹 페이지 렌더링을 클라이언트가 하기 때문에 서버 부하가 감소된다.
단점
- 웹 페이지를 처음 호출할 때 시간이 많이 걸림
- 검색엔진 최적화(SEO)에 불리하다.
- JavaScript가 동작하지 않는 환경에서 동작하지 않는다.
SEO(Search Engine Optimization)
검색엔진에서 웹 페이지를 찾기 쉽도록 사이트를 개선하는 프로세스를 말함.
검색엔진 최적화(SEO) 기본 가이드
SSR(Server Side Rendering)
클라이언트가 웹페이지에 접속하면 서버에서 페이지를 렌더링해서 클라이언트에 페이지 자체를 전달해주는 방식이다.
SSR은 서버에서 페이지를 완전히 렌더링하고, 클리이언트에게 전달한다.
이후 클라이언트는 서버로부터 받은 HTML파일을 바로 화면에 표시한다.
장점
- 첫 페이지 로딩 속도가 빠르다.
- 검색엔진 최적화(SEO)에 유리하다.
- JavaScript가 동작하지 않는 환경에서도 동작한다.
단점
- 웹 페이지 간 이동 시에 화면이 새로고침되는 현상이 생기기 때문에 사용자 경험이 좋지 않다.
- 웹 페이지 간 이동 시에 속도가 느린 편이다.
SSG(Static Site Generation)
빌드 과정에서 사전생성페이지(pre-render page)를 만들어 static 페이지로 서버가 가지고 있게 되며, 이후 클라이언트가 페잊디 요청 시 미리 만들어 놓은 페이지를 보여주는 방식이다.
미리 페이지를 생성하여 가지고 있기 때문에 SSR보다 클라이언트 요청에 대한 응답이 빠르다.
장점
- 빌드 과정에서 페이지를 미리 만들어 놓기 때문에 SSR보다 페이지 전환이 빠르다.
- 이미 생성된 HTML 파일을 전달받기 때문에 검색엔진 최적화(SEO)에 유리하다.
단점
- 모든 URL에 대해 HTML 파일을 생성해놓아야 하기 때문에 URL를 미리 예측할 수 없으면 적용하기 어렵다.
마무리
각각의 렌더링 방식은 장단점이 존재하기 때문에 웹 페이지의 서비스 성격에 따라 달라진다.
사용자의 데이터를 실시간으로 업데이트하여 동적인 차트, 그래프, 채팅 등을 제공하는 페이지
-> CSR
뉴스, 블로그, 컨텐츠 플랫폼 등 콘텐츠 위주의 웹 페이지
-> SSR
제품 설명서, API 문서, 포토폴리오 등 정적인 컨텐츠 중심의 페이지
-> SSG