React

[React] 서버 사이드 렌더링

썽연 2021. 10. 24. 13:17
728x90

서버 사이드 렌더링

- UI를 서버에서 렌더링하는 것을 의미한다.

 

리액트 프로젝트

- 클라이언트 사이드 렌더링

-> UI 렌더링을 브라우저에서 모두 처리하는 것

 

 

서버 사이드 렌더링 장점

- 검색 엔진이 우리가 만든 웹 애플리케이션의 페이지를 원활하게 수집할 수 있다.

-> 리액트로 만든 SPA는 검색 엔진 크롤러 봇처럼 자바스크립트가 실행되지 않는 페이지가 제대로 나타나지 않을수도 있음.

- 초기 렌더링 성능을 개선할 수 있다.

-> 서버 사이드 렌더링이 구현되지 않은 웹 페이지에 사용자가 방문 시, 자바스크립트가 로딩되고 실행될 때까지 사용자는 비어 있는 페이지를 보며 대기

-> 여기에 API호출하면, 사용자의 대기시간은 더욱 증가!

서버 사이드 렌더링을 구현한 페이지라면??

- 자바스크립트 파일 다운로드가 완료되지 않은 시점에서도 html상에 사용자가 볼 수 있는 콘텐츠가 있기 때문에 대기시간 최소화

 

서버 사이드 렌더링의 단점

- 웹 브라우저가 해야 할 일을 서버가 대신 처리하는 것이므로 서버 리소스가 사용된다.

- 수많은 사용자가 동시에 웹 페이지에 접속하면 서버에 과부하가 생김 -> 로드 밸런싱을 통해 성능 최적화

 

728x90