서버사이드렌더링(Server-Side-Rendering)이란?
- Rendering : 어떠한 웹 페이지 접속시, 그 페이지를 화면에 그려주는 것(요청받은 내용을 브라우저 화면에 표시하는것)
- 로더가(Loader)가 서버로부터 정보들을 불러옴
- 파싱(Phasing)을 통해 문서를 DOM 트리 만듦
- DOM트리가 구축되는 동안 브라우저는 렌더 트리를 구축
- css 설정/레이아웃 위치 지정
- 렌더링 트리가 그려짐
- 전통적인 웹 어플리케이션은 서버사이드렌더링 방식을 사용(전통 웹 방식 != SSR)
(즉, 브라우저에 나타나는 형태 그대로를 HTML로 만들어 제공하고, 브라우저는 HTML을 표시하는 방식이었다. 이런 방식을 사용하다가 일부 HTML과 Script만 브라우저로 전달하고, 브라우저에서 Script를 실행시켜 서버에서 데이터를 조회하여 HTML을 생성하는 방식을 사용하게 되었다.)
- 요청시마다 서버에서 처리 한 후 새로고침으로 페이지에 대한 응답(View)(새로고침이 일어나며 서버에 새로운 페이지에 대한 요청을 하는 방식)(서버 측에서 HTML&View를 생성하여 응답하는 방식)
ex) 마치 필요한 물건이 있을 때 마다 마트(서버)에 사러가는 것과 비슷
- 웹에서 많은 정보와 기능이 많아지면서 싱글페이지어플리케이션(SPA)개념이 생김
서버사이드렌더링(Server-Side-Rendering)의 장점
- SSR의 경우 view를 서버에서 렌더링하여 가져오므로 첫 로딩이 매우 짧음(view를 보기까지)
- 물론 js파일을 모두 다운로드하고 적용하기 전까지는 그 어떤 인터렉션에도 반응하지는 않지만, 사용자 입장에서는 로딩이 매우 빠르다고 느껴짐.
- SEO(Search Engine Optimization) 검색엔진 최적화에 유리함(js 라이브러리/프레임워크를 사용하면서 고질적인 문제는 seo이다. 그냥 미리 그려지지 않고 빈 껍데기만 제공된다면 검색엔진이 당연하게도 내용을 검색하는데 어려움이 있음 but, SSR은 서버에서부터 페이지를 제공할 때 컨텐츠가 담겨있기 때문에 SEO에 대한 걱정을 덜 수 있음)
서버사이드렌더링(Server-Side-Rendering)의 단점
- 장점을 제공하는 만큼 사용하는데에 있어서 어려움과 번거로움
(서버사이드 렌더링을 구현하게 된다면, 프로젝트의 구조가 많이 복잡해지게 됩니다.
- 단순히 렌더링만 하는것은 그렇게 큰 문제는 아니지만, 리액트 라우터, 리덕스 등의 라이브러리와 함께 연동해서 사용하면서, 서버에서 데이터를 가져와서 렌더링을 해줘야하는 경우엔 조금 어려워질수도 있습니다.)
- view 변경 시 서버에 계속 요청을 해야하므로 서버에 부담이 큼, 정보가 많은 B2C 웹 서비스 등에는 서버 부담이 큼(요청 시 마다 새로고침이 일어나며 페이지를 로딩할 때마다 서버로부터 리소스를 전달받아 해석하고 화면에 렌더링 하는 방식이기 때문이다. 예를들어 현재 주소에서 동일한 주소를 가리키는(갖고있는) 버튼을 눌렀을때, 설정페이지에서 필요한 데이터를 다시 가져올 수 없다.
이것은 사용자와 인터랙션이 많은 요즘 웹앱에게 충분하지 않는 방법일 수 있다. 렌더링을 서버쪽에서 하는 것은 그 만큼 렌더링을 위한 서버 자원이 사용되는 것이고, 불필요한 트래픽도 낭비되는 것이다.
- 서버사이드 렌더링을 구현하게 된다면, 프로젝트의 구조가 많이 복잡해지게 됩니다. 단순히 렌더링만 하는것은 그렇게 큰 문제는 아니지만, 리액트 라우터, 리덕스 등의 라이브러리와 함께 연동해서 사용하면서, 서버에서 데이터를 가져와서 렌더링을 해줘야하는 경우엔 조금 어려워질수도 있습니다.
(대안)동일한 페이지는 특정기간 동안 캐싱하여 성능을 최적화 할 수 있음
(대안)비동기식 렌더링
(써드파티 라이브러리를 통하여 비동기식으로 작동하게끔 코드를 작성 할 수 있습니다.
- .rapscallion: renderToString 을 비동기로 해주며, Promise 기반으로 작동하고, 컴포넌트 단위로 캐싱을 할 수 있습니다
- hypernova: airbnb 에서 만든 도구로서, 렌더링을 위한 서버를 따로 열어서 cluster 를 사용하여 여러 프로세스를 생성하여 렌더링을하고, 운영서버에서 렌더링서버로 결과물을 요청을 하는 방식으로 작동합니다.
- react-router-server: react-router v4 를 위해 만들어진 서버사이드 렌더링 라이브러리로서, Promise 비동기식 렌더링을 지원해주고, 깔끔한 방식으로 데이터를 불러올 수도 있습니다.)
(대안)메타태그(서버쪽에서 라우트에 따라 필요한 메타태그만 넣어주는 것. 그러면, 크롤러에선 해당 페이지에 대한 기본 정보는 얻어 갈 수 있게 된다.)
댓글