React-router - Server side Rendering _특징

ReactJS - Server side Rendering _특징

server side rendering 의  장점

검색 최적화

구글 검색엔진은 크롤러에 javascript 엔진이 내장되어 있기 때문에 개발자의 별도 작업 없이도 준비한 데이터를 렌더링해준다. 크롤링을 지원하지 않는 사이트에서 가능하게 하려면 서버사이드 렌더링을 따로 구현해야 된다.

성능개선

서버 사이드 렌더링을 하게 되면 첫 렌더링된 html을 client에게 전달해주기 때문에 초기 로딩속도를 향상시킬 수 있으며, javascript파일을 불러오고 렌더림 작업이 완료되기 전에도, 유저가 사이트의 contents를 이용 할 수 있게 된다.

server side rendering 의 단점

프로젝트의 복잡도

서버사이드 렌더링을 구현하면 프로젝트의 복잡도가 상승한다. react-reouter, redux와 함께 연동해서 작업할 때는 더더욱이 그렇다.이런 현상은 서버에서 데이터를 가져와서 렌더링을 해줜야 하기 때문이다. 그러므로 다소 어려움이 있지만 천천히 진행해보기로 하자.

성능 악화 가능성

server side rendering 을 구현할 때 ReactDOMServer.renderToString함수를 사용하게 되는데 이 함수는 동기적으로 작동한다.클라이언트의 초기 렌더링을 서버측이 대신함으로서 클라이언트의 부담을 줄여주지만 서버에서 시간이 오래걸리는 렌더링을 하는 동안 루프가 막히게 되는 치명적인 성능악화가 나타날 수 있다.

이를  해결하기 위한 첫번째 :  thirdparty 라이브러리를 이용해 비동기식 렌더링을 이용한다. 

• rapscallion: renderToString을 비동기로 해주며, Promise 기반으로 작동하고, 컴포넌트 단위로 캐싱

• hypernova: airbnb에서 만듬, 렌더링서버->clustering방식->운영서버에서 결과물 요청

• react-router-server: react-router v4를 위해 만들어짐, Promise 기반 비동기식 렌더링 지원

두번째 : 서버사이드 렌더링 최적화 - 검색엔진 크롤러 봇인경우에만 서버사이드 렌더링을 하게 함

세번째 : 개인화(ex : 로그인된 사용자의 뷰)된 데이터의 서버사이드 렌더링 회피 정책, 모든 유저에게 공통으로 보여지는 뷰들을 캐싱

server side rendering 의 다른 방법

메트태그만 넣어주기

리엑트 애플리케이션을 렌더링하지는 않고, 서버쪽에서 라우트에 따라 필요한 메타태그만 넣어주는 것이다. 그러면 크롤러에서는 해당 페이지에 대한 기본 정보는 얻어 갈 수 있게 된다. SNS공유를 할 때 내용이 잘 전달 되게 하기 위한 것이라면 매우 적합한 방식이다.

Prerender

만약에 최적환 때문에 서버사이드 렌더링을 구현해야 하는데, 단점들 때문에 고민인 개발자들에게 유용하다. 250뷰를 초과하면서 부터는 15$이상이 과금된다고 한다. 물론 그 이하는 무료이다. 이 서비스의 장점은 오픈소스로 공개되어 누구나 자신의 서버에서무료로 돌릴수도 있다는 점이다.

"검색엔진 최적화는 특권이 아닌 권리이기 때문에 오픈소스로 공개 한다." 라고 메뉴얼에 나와있다. 멋지다!!!