프론트엔드 개발자라면 다들 들어본 비슷하지만 다른..? 렌더링 방식에 대하여 정리하고자 합니다.
우선 간단하게 용어부터 정리 해보겠습니다
- SPA(Single Page Application) : 한 개의 페이지로 구성된 애플리케이션
- MPA(Multiple Page Application) : 여러 개의 페이지로 구성된 애플리케이션
- CSR(Client Side Rendering) : 클라이언트 측에서 렌더링을 하는 방식
- SSR(Server Side Rendering) : 서버 측에서 렌더링을 하는 방식
대부분 CSR + SPA 한 묶음, SSR + MPA 한 묶음 이라고 정의하곤 합니다.
이유는 많이 사용되는 React, Vue, Angular 등 JS 라이브러리나 프레임워크를 쓰면 HTML, CSS, JS 파일이 하나씩 나오기 때문에 자연스레 SPA가 되면서 CSR이 되고, SSR로 구현하면 페이지 별로 렌더링을 따로 하기 때문에 MPA가 되는 것 입니다.
참고로 현재는 React, Vue, Angular 모두 SSR을 지원 합니다.
SSR 방식의 MPA
이전 웹 사이트는 문서 하나의 전달되는 파일의 용량이 적었고, 페이지 전환 시 완전히 새로운 HTML을 서버에서 전송하는 방식으로 이루어졌습니다. 그러나 기술의 발전에 따라 웹 사이트가 고도화되며 페이지 용량이 커져갔고, 매번 새로운 페이지를 전달받아 보여주는 것이 부담이 되기 시작했습니다.
위와 같은 방식을 MPA(Multiple Page Application) 이라고 하며, SSR 방식을 사용 합니다.
SSR 렌더링 과정
1.브라우저에서 URL을 입력해서 서버에 HTTP Request를 보낸다.
2.서버가 이 요청을 받아서 해당 페이지를 만들기 시작한다. 이때 필요한 Data Fetching을 미리 해서 (API Call, Hydrate 등) 빈 페이지가 아닌 초기 콘텐츠가 로딩된 페이지를 만들어준다. 브라우저가 이 HTML 페이지를 받아 페이지를 DOM에 그린다. (이 시점부터 페이지가 사용자에게 보이게 된다)
3.브라우저가 페이지를 그리면서 동시에 태그 등을 통해 JS, CSS파일 등을 로딩한다.
4.로딩된 JS를 실행한다.
5.Interactive 한 페이지 구성이 완료된다.
SSR 의 장점은
1. 서버에서 한 번에 완성된 페이지를 받아오기 때문에 초기 로딩속도가 빠릅니다.
2. 서버에서 한 번에 웹의 정보를 HTML로 받아오기 때문에 검색로봇이 페이지를 크롤링하기에 적합해 SEO(검색 엔진 최적화)가 유리합니다.
잠깐, SEO 란?
웹 페이지 검색엔진이 자료를 수집하고 순위를 매기는 방식에 맞게 웹 페이지를 구성하여 검색 결과의 상위에 나올 수 있도록 하는 작업을 의미 합니다.
그렇다면 SEO 가 유리하다는 뜻은?
검색엔진이 meta태그 등을 참고하면서 해당 사이트를 잘 크롤링하고, 우선순위를 매길 수 있습니다.
하지만 CSR의 경우 서버로부터 빈 html을 내려받기 때문에, 구글 검색엔진과 같은 script까지 고려하여 크롤링하는 검색엔진이 아닌 경우에는 제대로 크롤링을 하지 못하게 되고, 결과적으로 SEO 측면에서 좋지 못합니다.
SSR 의 단점은
1. HTML 의 a태그 href 를 통해 페이지 이동을 하고, 해당 리소스를 서버에 요청하기 때문에
➡️ 새로운 페이지로 이동을 할 때 마다 화면이 새로고침되어 사용자 경험이 좋지 않습니다.
2. 매 페이지마다 서버에서 전송할 데이터를 저장해야 하기 때문에 부하가 발생할 수 있습니다.
CSR 방식의 SPA
CSR은 단 한 번만 리소스(HTML, CSS, JavaScript) 를 로딩하고, 그 후에는 데이터를 받아올 때만 서버와 통신 합니다.
➡️ 하나의 페이지에서 모든 데이터를 주고 받습니다
➡️ 사실 페이지 이동처럼 보이게 하는 것도 react-router-dom과 같은 대표적인 라우팅 라이브러리로 사실은 페이지 이동이 아니라 URL이 변경될 때 보여주는 컴포넌트가 달라지는 것 뿐입니다.
➡️ 실제로 페이지가 이동되어서 다시 html과 javascript를 받아오는 건 아닙니다!
CSR 렌더링 과정
1.브라우저에서 URL을 입력하면 서버에 HTTP Request를 통해 HTML을 다운로드한다.
2.맨 처음 다운로드한 HTML 파일은 아무것도 그려져 있지 않다. 다만 여러 JS, CSS파일을 불러올 수 있는 링크들이 있으며 이 링크를 통해 JS, CSS를 다운로드한다.
3.브라우저가 JS코드를 실행한다. 이 JS코드 안에서 React가 구동되며 이 React가 VirtualDOM에 콘텐츠를 렌더링 한다.
4.VirtualDOM 구성이 완료되면 이를 브라우저의 DOM에 붙인다. (기본적으로는"root"의 하위)
5.브라우저가 렌더 트리 구성, 페인트, 플로우 등의 과정을 거쳐 페이지를 그린다
6.브라우저에 페이지가 나타나게 된다
요약하자면, CSR의 경우
➡️ 먼저 빈 html을 받고, js 스크립트 파일들을 다운로드한 뒤 react를 활용하면서 html을 채우고, 렌더링을 시작 합니다.
CSR 의 장점은
1. CSR 방식은 중복된 리소스 요청 없이 필요한 요청만 하기 때문에 퍼포먼스 상 이득을 가져올 수 있고,
2. 사용자에게 앱과 비슷한 수준의 사용자 경험을 제공 할 수 있습니다. ( 페이지 전환 시 새로고침이 없다 )
CSR 의 단점은
1. JS 파일을 한 번에 내려 받기 때문에 초기 구동 속도가 느립니다.
2. 위에서 말한 것 처럼 SEO 취약 합니다.
참고
'✅ Logs > Study' 카테고리의 다른 글
| [React] - useEffect (0) | 2023.02.06 |
|---|---|
| [React] - useState (0) | 2023.02.03 |
| [React] - React 의 불변성 (0) | 2023.01.17 |
| [React] - 컴포넌트(Component)란? (0) | 2022.11.25 |
| [React] Props와 State (0) | 2022.11.17 |
