본문 바로가기
FrontEnd/React.js

Rendering

by 해학 2022. 9. 13.
728x90

서버 로 부터 요청해서 받은 내용을  브라우저 화면에 표현 해주는 것

 종류

1.  서버사이드 렌더링 (SSR) : 페이지 이동 마다 새로운 페이지 요청 (새로고침)

장점

단점

  • 검색엔진 최적화 (SEO)
  • 성능개선
    (첫 렌더링된 html 을 클라이언트에게 전달해 로딩속도 감소.)
    (자바스크립트 파일을 불러오고 렌더링 작업이 완료되기 전에
    사용자가 사이트 컨텐츠를 이용할 수 있게된다.)
  • 프로젝트의 복잡도
  • 페이지 이동시 화면이 깜빡 거림
  • 서버 렌더링에 따른 부하 발생

2. 클라이언트 사이드 렌더링 (CSR) : 클라이언트에서 렌더링 

 첫 요청 시 한 페이지만 불러온다. ( Single Page Application)=> index.js 불러옴

장점

단점



  • 바뀐부분만 렌더링 
  • 단위를 나눠서 관리 가능
  • 코드의 재사용성을 높여줌

    (사용자 행동으로 필요한 부분만 다시 읽어들이기 때문에
    전체 페이지를 다시 읽어들이는 것보다 빠른 인터렉션)
    리로딩 없이 필요한 부분만 서버로 받아서 화면을 갱신하게 된다.


  • 초기 구동속도가 느리다 .
  • 검색엔진 최적화 어려움.

 리액트 => 클라이언트 사이드 렌더링  사용

728x90

'FrontEnd > React.js' 카테고리의 다른 글

Fragments  (0) 2022.11.14
접근성  (0) 2022.11.14
순수함수  (0) 2022.08.19
JSX  (0) 2022.08.15
React Router  (0) 2022.08.01