[React] Critical Rendering Path, SPA

브라우저가 하나의 화면을 렌더링하는 과정

HTML 파싱: 브라우저는 HTML 문서를 읽고 DOM을 생성. (HTML 요소를 트리 구조로 표현)
CSS 파싱: CSS 파일이 로드되면, 브라우저는 이를 파싱하여 CSSOM(CSS Object Model)을 생성.
Render Tree 생성: DOM과 CSSOM이 결합되어 Render Tree가 생성
- 브라우저에 실제로 표시될 요소와 각 요소의 스타일 정보도 포함하는 웹페이지의 설계도 역할.
Layout: Render Tree가 생성된 후, 브라우저가 각 요소의 크기와 위치를 계산하는 과정
Painting: Layout이 완료되면, 브라우저는 화면에 요소를 실제로 그린다.

여기서 자바스크립트가 DOM을 수정하면 업데이트가 발생한다.

즉 DOM이 수정되므로 Render Tree → Layout → Painting 단계가 다시 진행된다.

여기서 Layout, Painting 작업은 오래 걸리는데, 서비스에서 동시에 업데이트가 발생하여 DOM 트리 구조가 바뀌는 상황이 발생한다면 화면이 빠르게 전환되지 못하고 성능 저하가 생길 수 있다.

리액트는 동시에 발생하는 업데이트들을 모은 뒤 한 번에 DOM을 수정할 수 있도록 Virtual DOM을 이용한다.

Virtual DOM?

DOM을 자바스크립트 객체로 복사한 복제판

그리고 변경사항이 생긴다면 Virtual DOM에 적용 후 실제 DOM을 수정

말 그대로 한 개의 Page로 구성된 Application을 뜻한다.

웹 서버에 index.html 페이지를 딱 한 개만 가지고 있고, 그 외에 리액트 컴포넌트, 유틸리티 기능을 가진 자바스크립트 파일들이 있다.

따라서 사용자가 어떠한 경로를 요청하던 간에 무조건 Index.html 파일을 전달하고, 모든 자바스크립트 파일을 하나로 묶어서 브라우저에게 전달한다. (번들링이라고 하며 이 과정은 Vite로 프로젝트 생성 시 Vite가 처리)

그리고 브라우저는 번들 파일을 실행한다. (여기서 번들 파일은 작성한 모든 자바스크립트 파일을 하나로 합친 것으로 리액트 앱이라고도 함)

리액트는 main.jsx가 브라우저에서 가장 먼저 실행되어 해당 메서드를 호출하며 App 컴포넌트를 렌더링한다.

createRoot(document.getElementById('root')).render(
  <App />
)

이렇게 브라우저에서 직접 자바스크립트 파일을 실행, 렌더링하는 방식을 CSR(클라이언트 사이드 렌더링)이라고 한다.

리액트는 위 방식으로 처리하여 초기 로딩 시에 필요한 리소스(HTML, CSS, JS)를 모두 로드하고, 이후에는 AJAX 요청을 통해 데이터만 업데이트한다.

따라서 페이지 리로딩 없이 필요한 부분만 서버로부터 받아서 화면을 갱신할 수 있어 자연스러운 페이지 이동과 사용자 경험을 제공할 수 있다.

↔ MPA(Multiple Page Application)

일반적으로 브라우저에서 특정 URL로 요청하면 서버는 해당 요청에 맞는 정적 리소스를 반환하고 브라우저는 반환받은 페이지를 화면에 렌더링한다.

여기서 서버가 사용자에게 제공할 여러 정적 리소스를 미리 가지고 있는 애플리케이션이라는 의미로 MPA라고 한다.

그리고 서버가 보내준 정적 리소스를 렌더링하는 것을 SSR(서버 사이드 렌더링)이라고 한다.

이는 페이지 이동 시 마다 서버에 요청을 보내야하고, 페이지를 반환받으면 해당 페이지로 전체를 다시 렌더링하게 된다. 이는 페이지가 새로고침 되는 듯한 느낌으로 쾌적하지 못한 느낌을 주며 서버의 부하가 있다는 단점이 있다.

hbb-log