SSR과 CSR
CSR : 클라이언트 사이드 렌더링
-
방식 :
클라이언트 브라우저에서 앱 렌더링을 진행
HTML, JS, CSS 파일을 모두 다운로드 한 뒤에 뷰가 구성 -
단점 :
1) 어플리케이션이 커질수록 초기로딩 느림
2) SEO에 취약
초기 JS 파일을 전부 로드한 후 뷰, 페이지정보를 구성하기 때문 -
활용 :
1) 사용자 경험(UX)을 중요시 여기는 페이지, 인터렉션 빠름
SSR : 서버 사이드 렌더링
-
방식 :
서버에서 뷰 구성에 필요한 전체 HTML을
-> 요청을 받은 즉시 생성해서 반환
-> 클라이언트 브라우저에서 응답을 받은 후 이미 완성된 뷰를 그대로 보여줌 -
장점 : SEO, 초기로딩 빠름.
-
단점 :
1) 페이지 전환시 깜빡임. 서버에서 렌더링해주는 새로운 파일을 받음
2) 클라이언트단에서 메모리에 데이터를 유지할 수 없음
3) 인터렉션은 상대적으로 느림 -
활용 :
1) 상품 정보가 수시로 바뀌는 데이터 + SEO
Virtual DOM
Virtual DOM
- Virtual Document Object Model
-
- 리액트는 가상돔을 이용해서, 변화가 일어난 부분만 실제 DOM에 렌더링
- 이 가상 DOM 은 랜더링 되지 않기 때문에, 실제 DOM 에 비해 연산 비용이 적다
작동원리
DOM은 오타 수정같은 사소한 일을 해도 처음부터 다시
HTML을 파싱하여 DOM 트리를 만들고
CSS를 파싱하고 Render 트리를 만들고
레이아웃을 입혀 출력한다
Virtual DOM은 수정사항이 여러가지 있더라도 한번만 렌더링을 일으킨다. - 배치 작업
이전 상태의 가상 돔과 변경된 상태의 가상 돔을 비교하여 변경된 부분만 부분만 DOM에 전달하여 수정한다
