FrontEnd/React.js
Rendering
by 해학
2022. 9. 13.
서버 로 부터 요청해서 받은 내용을 브라우저 화면에 표현 해주는 것
종류
1. 서버사이드 렌더링 (SSR) : 페이지 이동 마다 새로운 페이지 요청 (새로고침)
장점
|
단점
|
- 검색엔진 최적화 (SEO)
- 성능개선
(첫 렌더링된 html 을 클라이언트에게 전달해 로딩속도 감소.) (자바스크립트 파일을 불러오고 렌더링 작업이 완료되기 전에 사용자가 사이트 컨텐츠를 이용할 수 있게된다.)
|
- 프로젝트의 복잡도
- 페이지 이동시 화면이 깜빡 거림
- 서버 렌더링에 따른 부하 발생
|
2. 클라이언트 사이드 렌더링 (CSR) : 클라이언트에서 렌더링
첫 요청 시 한 페이지만 불러온다. ( Single Page Application)=> index.js 불러옴
장점
|
단점
|
- 바뀐부분만 렌더링
- 단위를 나눠서 관리 가능
- 코드의 재사용성을 높여줌
(사용자 행동으로 필요한 부분만 다시 읽어들이기 때문에 전체 페이지를 다시 읽어들이는 것보다 빠른 인터렉션) 리로딩 없이 필요한 부분만 서버로 받아서 화면을 갱신하게 된다.
|
- 초기 구동속도가 느리다 .
- 검색엔진 최적화 어려움.
|
리액트 => 클라이언트 사이드 렌더링 사용