렌더링이란?
- HTML, CSS, JS 등 개발자가 작성한 문서들을 서버에서 응답받아 브라우저가 화면에 그려주는 동작
- 각각 브라우저마다 해당 엔진의 종류는 다를 수 있다
CSR : 클라이언트 사이드 렌더링
- 클라이언트(브라우저) 사이드에서 렌더링을 책임지는 방식이다
- 최초의 HTML파일을 받는 것을 제외하고 페이지 렌더링을 위한 별도의 HTTP 통신을 할 필요가 없다.
- 따라서 서버의 요청없이 클라이언트에서 라우팅을 담당하기 때문에 후속 페이지 로드 시간이 훨신 빠르고 부드럽다
- 서버는 오직 Ajax를 통해 필요한 데이터를 주고 받는 역할만 수행한다.
- 자바스크립트의 번들의 크기의 영향을 많이 받기 때문에 코드분할을 고려해야한다.
동작과정
- 사용자가 웹사이트에 접속하면 서버는 빈 HTML과 JavaScript 파일을 보낸다
- 브라우저가 JavaScript를 로드하고 실행한다
- JavaScript가 동적으로 HTML을 생성하고, 이를 브라우저에 표시한다
- 추가 페이지 요청 시, 전체 페이지를 다시 로드하는 대신 필요한 데이터만 서버에서 받아와서 해당 부분만 업데이트한다
장점
- 빠른 인터랙션 제공: 초기 로딩 후, 필요한 데이터만 서버에서 가져와 동적으로 페이지를 업데이트하기 때문에 추가 페이지 로딩이 없다 -> 이로 인해 사용자와의 인터랙션이 빠르게 이루어진다
- 서버 부하 감소: 전체 페이지를 매번 새로 렌더링 하지 않고, 변화가 있는 부분만 업데이트하므로 서버에 부담을 덜어준다
단점
- 초기 로딩 속도 느림: 브라우저가 JavaScript를 로드하고 실행하는 과정이 필요하므로, 이 과정으로 인해 초기 로딩 속도가 느릴 수 있다.
- SEO 취약: 브라우저가 JavaScript를 실행하여 동적으로 만드는데, 이 과정이 실행되기 전에는 빈 HTML이 먼저 화면에 보이게 됩니다. 이 때문에 웹 크롤러가 페이지의 내용을 제대로 인식하지 못하여, 검색 엔진 최적화(SEO)에 취약할 수 있습니다.
적합한 상황
- 사용자와의 상호작용이 많은 웹사이트에 적합하다
- 예를 들어, 대시보드, 어드민 페이지와 같은 곳에서 사용자의 입력에 따라 화면이 동적으로 변하는 경우와 SEO가 크게 중요하지 않은 경우에 활용할 수 있다
SSR : 서버 사이드 렌더링
- 브라우저가 서버에 요청하면 서버가 필요한 데이터로 HTML을 구성하여 브라우저에 전송하고 브라우저에서 응답받은 HTML을 렌더링하는 방식이다
동작과정
- 사용자가 웹사이트에 접속하면 서버에서 해당 페이지에 필요한 HTML을 생성합니다.
- 서버는 생성된 HTML을 브라우저로 보냅니다.
- 브라우저는 받은 HTML을 표시합니다.
- 추가 페이지 요청 시, 해당 페이지에 대한 HTML을 다시 서버에서 생성하여 보냅니다.
장점
- 빠른 초기 페이지 로딩: 렌더링이 준비된 HTML 파일을 브라우저에서 로드하기 때문에 첫 페이지 로딩이 빨라지는 이점이 있다.
- SEO에 유리: 이미 만들어진 페이지를 검색엔진 크롤러가 요청에대한 응답을 받기 때문에 SEO에 친화적이다
단점
- 서버 부하 증가 :서버에서 매번 페이지를 새로 렌더링하기 때문에 화면이 부드럽지 않다. (페이지 이동할때마다 새로고침 현상) 그리고 이 사항 때문에 서버 부하가 생길 수 있으며, 서버 비용 또한 많이 든다
적합한 상황
- 동적 콘텐츠가 많은 웹사이트
- 사용자의 요청에 따라 콘텐츠가 실시간으로 변경되어야 하는 경우, 서버에서 렌더링을 통해 항상 최신 상태의 웹 페이지를 제공할 수 있디
- 예를 들어, 사용자 맞춤형 콘텐츠를 제공하는 웹사이트, 주식 정보와 같이 실시간으로 변경되는 데이터를 다루는 웹사이트
SSG : 정적 사이트 생성
- SSR처럼 서버로부터 HTML을 받아오지만 HTML 파일 생성시점이 빌드타임 입니다.
- 위 처럼 화면을 서버에서 미리 만들어서 전송해주는 기법
동작과정
- 빌드 시에 서버는 모든 가능한 요청에 대한 HTML을 미리 생성한다
- 사용자가 웹사이트에 접속하면, 서버는 미리 생성해 둔 HTML을 보낸다
- 브라우저는 받은 HTML을 표시한다
- 추가 페이지 요청 시, 미리 생성해 둔 해당 페이지의 HTML을 보낸다
장점
- 빠른 로딩 속도: 모든 페이지가 빌드 시에 미리 생성되므로, 사용자가 요청 시에는 빠른 로딩 속도를 제공한다
- 서버 부하 감소: 미리 생성된 HTML만 제공하므로, 서버 부하가 적다
- SEO 친화적 : 이미 생성된 HTML 을 받기 때문이다
단점
- 데이터 변경에 불편: 사이트의 데이터가 변경될 때마다 전체 사이트를 다시 빌드해야 한다
적합한 상황
내용이 자주 변경되지 않은 웹사이트에 적합하다
- 예를 들어, 회사 소개, 제품 소개, FAQ 등과 같은 정보를 제공하는 사이트나, 개인 블로그와 같이 콘텐츠가 일정 시간 동안 고정되는 경우
