[Part Exchange FE 7조] CSR vs SSR vs ISR, DOM과 Virtual DOM

CSR vs SSR vs ISR

웹 렌더링이란?

웹 페이지를 사용자에게 보여주는 과정

렌더링 방식들

• 클라이언트 사이드 렌더링(Client Side Rendering, CSR)
• 서버 사이드 렌더링(Server Side Rendering, SSR)
• 정적 사이트 생성(Static Site Generation, SSG)
• 증분 정적 재생성(Incremental Static Regeneration, ISR)

1. CSR, 클라이언트 사이드 렌더링

웹 브라우저에서 JavaScript를 사용하여 웹페이지를 렌더링하는 방식

동작 과정

1. 브라우저가 서버에서 기본 HTML과 JavaScript 파일을 다운로드.
2. 브라우저가 JavaScript를 실행해 애플리케이션을 초기화하고, API를 통해 데이터를 가져옴.
3. 데이터를 기반으로 브라우저에서 DOM을 동적으로 생성하고 렌더링.

사용자가 최초 페이지에 들어간다면 모든 파일이 포함된 index.html 파일 다운 → 화면 렌더링

2. SSR, 서버 사이드 렌더링

서버에서 HTML을 완성하여 브라우저로 보내는 방식

동작 과정

1. 서버가 요청을 받아 필요한 데이터를 가져오고 HTML을 완전히 렌더링.
2. 서버가 렌더링된 HTML을 브라우저로 전달하여 즉시 표시.
3. 브라우저가 JavaScript를 다운로드하고 실행해 애플리케이션을 활성화(hydration).

→ js파일을 전부 다운받기전까지는 정적인 ui는 모두 정상적으로 작동하지만 인터렉션이 정상적으로 작동되지 않음

3. SSG, 정적 사이트 생성

빌드 시에 모든 페이지를 HTML로 미리 생성하는 방식

동작 과정

1. 빌드 시점에 서버가 모든 페이지를 미리 렌더링하여 정적 HTML 파일로 생성.
2. 클라이언트 요청 시, 서버가 이미 생성된 정적 HTML을 전달.
3. 필요 시 JavaScript가 실행되어 동적인 기능을 추가.

4. ISR, 증분 정적 재생성

빌드 시점에 페이지를 미리 생성하면서도 특정 시간 간격으로 페이지를 재생성하여 업데이트된 데이터를 반영하는 방식 (SSG와 SSR의 단점을 보완하고 장점을 결합한 방식)

동작 과정

1. 요청 시 기존 정적 HTML 파일을 즉시 제공.
2. 설정된 재생성 시간 이후에는 서버가 요청을 받을 때 백그라운드에서 최신 데이터를 기반으로 HTML을 다시 생성.
3. 새 HTML은 기존 파일을 대체하며, 이후 요청은 최신 파일을 제공.

장단점 및 적합한 사례 정리

렌더링 방식	CSR	SSR	SSG	ISR
SEO	낮음	높음	높음	높음
초기 로딩 시간	초기에 느림, 이후에 빠	보통	매우 빠름	보통
서버 부하	낮음	보통	매우 낮음	낮음
데이터 가져오기	클라이언트	서버	빌드 시점	하이브리드
적합한 사례	동적 콘텐츠가 많음	SEO 최적화, 콘텐츠 중심	포트폴리오, 개인 블로그	자주 업데이트 되는 데이터

 

DOM과 Virtual DOM

DOM이란?

Document Object Model

웹 페이지의 구조와 내용을 나타내는 객체 기반 표현으로, HTML과 CSS를 트리 형태의 노드로 구성하여 브라우저가 웹 페이지를 이해하고 조작할 수 있게 한다.

HTML이란 코드로 설계된 웹페이지가 브라우저 안에서 화면에 나타나고, 이벤트에 반응하며 값을 입력받는 등 기능들을 수행할 객체들로 실체화된 형태를 의미한다.

HTML 문서 ➡️ 파싱 ➡️ DOM 객체

DOM 조작의 비효율성

실제 DOM에는 브라우저가 화면을 그리는데 필요한 모든 정보가 들어있어 실제 DOM을 조작하는 작업이 비효율적이다. 따라서 실제 DOM의 변경 사항을 빠르게 파악하고 반영하기 위해서 내부적으로 Virtual DOM을 만들어서 관리한다.

Virtual DOM이란?

Virtual DOM은 실제 DOM을 모방하는 형태로 메모리 상에서만 존재하는 가상의 DOM을 의미한다. 변화가 실제 DOM에 적용되기 전에 가상의 DOM을 한번 거쳐 미리 처리하고 저장한 후 실제 DOM에 업데이트 할 수 있게 해준다.

→ DOM Fragment에 변화를 묶어서 적용시킨 다음에 기존 DOM에 던져주는 과정

Virtual DOM은 실제 DOM의 복사본이기 때문에, 실제 DOM의 모든 element과 속성을 공유한다.

실제 DOM과의 차이점은 브라우저에 있는 문서에 직접적으로 접근할 수 없다는 점 때문에 화면에 보여지는 내용을 직접 수정할 수 없다는 것이다.

• JavaScript 객체를 활용
• 메모리 상에서 동작하기에 훨씬 더 빠르게 동작
• 실제 렌더링이 되지 않기 때문에 연산 비용이 적음

Virtual DOM이 DOM 조작을 효율적으로 처리하는 과정

Virtual DOM은 달라진 값을 탐지하여 그 부분을 변경하고, 최종적인 결과물을 실제 DOM에 전달한다.

DOM은 변경된 빨간 부분 뿐만 아니라 모든 동그라미를 빨간색으로 바꿔서 렌더링 한다. 사소한 변경사항에도 전체가 다시 렌더링 되기 때문에 브라우저에 과부하가 올 가능성이 높다.