렌더링의 과정
렌더링이란 서버로부터 요청해서 받은 내용을 브라우저 화면에 보여주는 것을 의미한다. 렌더링은 아래의 과정을 통해 진행된다.
- loader가 서버로부터 정보들을 불러온다.
- 파싱을 통해서 DOM트리를 구성한다.
- DOM트리가 구축되는 동안 브라우저는 렌더 트리를 구축한다.
- css설정/ 레이아웃 위치를 지정한다.
- 렌더링 트리가 그려진다.
서버 사이드 렌더링 (SSR)
서버사이드 렌더링은 html,css,js를 직접 올리는 것이 아니라 해당 파일들을 만들어 낼 수 있는 로직을 올리고 서버에서 해당 로직을 실행해서 최종적으로 html,css,js를 만들어 브라우저에 전달한다. 만들어진 html파일에는 이미 DOM이 다 구성되어 있다. 이미 DOM이 다 구성된 파일을 브라우저가 받기 때문에 바로 그릴 수 있어 초기 구동 속도가 빠르다. DOM에 이미 내용이 다 차 있어 검색 엔진들이 정보를 수집할 때 유리한 면이 있다.
- 브라우저에서 보는 파일을 서버에서 만들어 렌더링하는 방식이다.
장점
- 검색 엔진 최적화 기능
- 첫 렌더링된 html을 클라이언트에게 전달해 주기 때문에 초기 로딩속도를 많이 줄여줄 수 있다.
- 자바스크립트 파일을 불러오고 렌더링 작업이 완료되기 전에 사용자가 사이트 컨텐츠를 이용할 수 있다.
단점
- 프로젝트의 복잡도
- 페이지 이동 시 화면이 깜빡거림
- 서버 렌더링에 따른 부하가 발생
- 페이지 요청마다 페이지 새로고침이 발생 (깜빡거림의 이유)
클라이언트 사이드 렌더링 (CSR)
클라이언트에서 렌더링하는 방식. 브라우저는 웹서버로부터 js파일을 실행하면서 DOM에 내용을 추가하고 그리게 된다. 초기에 js를 읽어 무엇을 그려야 할 지 판단하고 그리는 작업을 하는 동안 딜레이가 생긴다. 하지만 이후 작업에 있어서는 서버의 의존도 없이 클라이언트 혼자 그릴 수 있으므로 빠른 화면 전환이나 인터렉션이 가능하다. index.html에 단순히 뼈대만 있기 때문에 검색 엔진의 봇들이 크롤링할 때 아무 내용이 없어 SEO에 불리하다.
장점
- 첫 요청할 때 한 페이지만 불러오게 된다.
- 사용자의 행동에 따라 필요한 부분만 다시 읽어 렌더링하기 때문에 서버에서 렌더링하여 전체 페이지를 다시 읽는 것보다 빠른 인터렉션을 기대할 수 있다.
- 필요한 부분만 리로딩 없이 서버로부터 받아서 화면을 갱신한다.
단점
- 초기 구동속도가 느리다. (전체 파일들을 올려야해서)
- 검색 엔진 최적화(SEO)가 어렵다.
SPA란?
단일 페이지로 구성된 웹 어플리케이션을 말한다. SPA는 화면 이동 시에 필요한 데이터를 서버로부터 html으로 받지 않고 json으로 전달받아 동적으로 렌더링한다.
기존 어플리케이션과 spa의 차이
기존 어플리케이션은 화면이동 시에 html을 서버에서 받아 처음부터 다시 로딩하기 때문에 시간이 걸린다. 하지만 SPA에서는 화면 구성에 필요한 모든 html을 클라이언트가 갖고 있고 서버사이드에는 필요한 데이터를 요청하고 json으로 받기 때문에 기존의 어플리케이션에 비해 화면을 구성하는 속도가 빠르다.
장점
- 하나하나 화면 전체를 렌더링할 필요가 없기 때문에 화면 이동이 빠르다.
- 화면에 필요한 부분의 데이터만 받아서 렌더링하기 때문에 처리과정이 효율적이다.
단점
- 처음 화면을 로딩할 때, 모든 화면이 미리 준비되어 있어야 하기 때문에 로딩에 시간이 걸린다.
- 페이지 정보를 수집하지 못해서 대형 포털 사이트에서 검색이 안되는 경우가 있다.
