Page 29 -

맨 위에 있는 localhost를 선택하고 Response를 보면 root 엘리먼트가 비어 있는 것을 확인할 수
있습니다. 즉, 이 페이지는 처음에 빈 페이지라는 뜻이죠. 그 이후에 자바스크립트가 실행되고 리
액트 컴포넌트가 렌더링되면서 우리에게 보이는 것입니다.

서버 사이드 렌더링을 구현하면 사용자가 웹 서비스에 방문했을 때 서버 쪽에서 초기 렌더링을 대
신해 줍니다. 그리고 사용자가 html을 전달받을 때 그 내부에 렌더링된 결과물이 보입니다.

20.1.1 서버 사이드 렌더링의 장점

서버 사이드 렌더링에는 어떤 장점이 있을까요? 일단 구글, 네이버, 다음 등의 검색 엔진이 우리
가 만든 웹 애플리케이션의 페이지를 원활하게 수집할 수 있습니다. 리액트로 만든 SPA는 검색
엔진 크롤러 봇처럼 자바스크립트가 실행되지 않는 환경에서는 페이지가 제대로 나타나지 않습니
다. 따라서 서버에서 클라이언트 대신 렌더링을 해 주면 검색 엔진이 페이지의 내용을 제대로 수

집해 갈 수 있습니다. 구글 검색 엔진은 다른 검색 엔진과 달리 검색 엔진에서 자바스크립트를 실
행하는 기능이 탑재되어 있으므로 제대로 페이지를 크롤링해 갈 때도 있지만, 모든 페이지에 대해
자바스크립트를 실행해 주지는 않습니다. 따라서 웹 서비스의 검색 엔진 최적화를 위해서라면 서
버 사이드 렌더링을 구현해 주는 것이 좋습니다.
20
또한, 서버 사이드 렌더링을 통해 초기 렌더링 성능을 개선할 수 있습니다. 예를 들어 서버 사이드
렌더링이 구현되지 않은 웹 페이지에 사용자가 방문하면, 자바스크립트가 로딩되고 실행될 때까

지 사용자는 비어 있는 페이지를 보며 대기해야 합니다. 여기에 API까지 호출해야 한다면 사용자 서버 사이드 렌더링
의 대기 시간이 더더욱 길어집니다. 반면 서버 사이드 렌더링을 구현한 웹 페이지라면 자바스크립
트 파일 다운로드가 완료되지 않은 시점에서도 html상에 사용자가 볼 수 있는 콘텐츠가 있기 때
문에 대기 시간이 최소화되고, 이로 인해 사용자 경험도 향상됩니다.

20.1.2 서버 사이드 렌더링의 단점

그럼 단점도 생각해 볼까요? 서버 사이드 렌더링은 결국 원래 브라우저가 해야 할 일을 서버가 대
신 처리하는 것이므로 서버 리소스가 사용된다는 단점이 있습니다. 갑자기 수많은 사용자가 동시
에 웹 페이지에 접속하면 서버에 과부하가 발생할 수 있지요. 따라서 사용자가 많은 서비스라면

캐싱과 로드 밸런싱을 통해 성능을 최적화해 주어야 합니다.

539

리액트를 다루는 기술_개정판(본문)최종출력용.indb 539 2019-08-20 오전 11:03:32