[ReactJS] 서버사이드 렌더링(SSR)과 클라이언트사이드 렌더링(CSR)이란

 

랜더링이란 (Rendering)

 

서버로 부터 받은 내용을 브라우저에 표시함 

 

- Loader 가 서버로 부터 원본 HTML 문서를 읽어들임

- 브라우저는 파싱을 통해 최종적으로 어떤 내용을 페이지에 렌더링할 지 결정한다.

1) DOM 트리 구축

2) CSSSOM 트리 구축

3) JavaScript 실행

- 렌더 트리를 구축

- CSS 설정/레이아웃 위치 지정 후 렌더링 트리가 페인팅된다. 

 

DOM(Document Object Model) : HTML 요소들의 구조화된 표현
CSSOM(Cascading Style Sheets Object Model) : 요소들과 연관된 스타일 정보의 구조화된 표현

 

* DOM이란 무엇인가

seizemymoment.tistory.com/133?category=879018

[Java Script] DOM (Document object module)이란?

---

서버사이드 렌더링(Server Side Rendering)

 

서버 연산을 통해서 렌더링하고 완성된 페이지 형태로 응답한다.

페이지 이동 시 새로운 페이지를 요청한다.

 

(장점)

- 검색엔진에 최적화

- HTML이 먼저 렌더링 되기 때문에 성능이 개선된다. 

 

(단점)

-  페이지 요청마다 새로고침이 일어나기 때문에 페이지 이동시 화면이 깜빡 거린다.

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

 

 

클라이언트 사이드 렌더링 (Client Side Rendering)

 

클라이언트에서 렌더링하는 방식이다.

서버로 부터 데이터를 받아

클라이언트에서 바뀐 데이터가 있는 화면만 새롭게 랜더링함

첫 요청 시에는 한 페이지만 불러옴(reactJS에서는 index.js)

 

(장점)

- 리로딩 없는 빠른 인터렉션

- 안드로이드, IOS, 웹 모바일 등 다양한 플랫폼이 서버를 공유할 수 있게 되어

효율적으로 서버를 운영할 수 있게 된다.

 

(단점)

- 초기 구동속도가 느리다

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

 

---

 

velog.io/@ash3767/%EC%84%9C%EB%B2%84%EC%82%AC%EC%9D%B4%EB%93%9C-%EB%A0%8C%EB%8D%94%EB%A7%81-%ED%81%B4%EB%9D%BC%EC%9D%B4%EC%96%B8%ED%8A%B8-%EC%82%AC%EC%9D%B4%EB%93%9C-%EB%A0%8C%EB%8D%94%EB%A7%81

서버사이드 렌더링(ssr) & 클라이언트 사이드 렌더링(csr)

velog.io/@wooder2050/%EB%A6%AC%EC%95%A1%ED%8A%B8React%EB%8A%94-%EC%99%9C-%EC%93%B0%EB%8A%94-%EA%B1%B4%EB%8D%B0

리액트(React)는 왜 쓰는 건데⁉