클라이언트 사이드 렌더링/서버 사이드 렌더링

렌더링 - 서버로부터 받은 내용을 브라우저 화면에 표시하는 것

 

렌더링의 과정

- Loader가 서버로부터 정보를 불러옴

- Parsing을 통해 문서를 DOM 트리로 만든다.

- DOM 트리가 구축되는 동안 브라우저는 렌더 트리를 구축

- CSS 설정/레이아웃 위치 지정

- 렌더링 트리가 그려짐

 

클라이언트 사이드 렌더링(CSR)

- 보통 브라우저에서 자바스크립트를 사용해 콘텐츠를 렌더링하는 것.

- 즉, 자바스크립트를 사용하여 HTML 문서에 렌더링을 진행하는 것.(Vue.js와 React.js의 등장으로 인기를 끌었다.)

- 서버에 문서를 요청하는 것이 아니라, 브라우저에서 처리

 

장점

- 처음 요청할 때 한 페이지만 불러온다. (예-React에서 index.js만 불러온다)

- 사용자의 행동에 따른 필요한 부분만 다시 읽어들이기 때문에 상호작용이 빠르다.

- 필요한 부분만 리로딩 없이 서버로부터 받아서 화면을 갱신하게 된다.

 

단점

- 초기 구동속도가 느리다.

- SEO(검색엔진 최적화)가 어렵다.

 

서버 사이드 렌더링(SSR)

- 서버에 HTML 파일을 저장해두었다가, 요청이 발생할 때 모든 파일을 브라우저에 전달하는 방식으로 SEO, 인덱싱, 크롤링에 최적화되어 있다.

- 페이지를 이동할 때마다 새로운 페이지를 요청

- 모든 템플릿은 서버 연산을 통해 렌더링하고 완성된 페이지 형태로 응답.

 

장점

- SEO(검색엔진 최적화) 가능

- 성능개선(처음 렌더링된 HTML 파일을 클라이언트에게 전달해주기 때문에 초기 로딩속도를 많이 줄여줄 수 있다. 자바스크립트 파일을 불러오고 렌더링 작업이 완료되기 전에 사용자가 사이트 컨텐츠 이용 가능)

 

단점

- 프로젝트의 복잡도

- 페이지 이동 시 화면이 깜빡거린다.

- 서버 렌더링에 따른 부하가 발생