[WEB] Server-Side rendering

SSR (Server-Side rendering)

출처: https://dev.to/itnext/server-side-rendering-with-react-redux-and-react-router-2en7

 

-  User가 페이지에 처음 접근하였을때, 페이지를 서버측에서 먼저 간단하게 띄워주고, 완전하게 렌더링된 페이지를 클라이언트에게 다시 보내주는 기법이다.

- 사용자의 요청시(인터렉션이 있을 때)마다 새로고침이 일어나며, 서버에 새로운 페이지에 대한 요청을 한다.

 

장점 :

SEO (검색엔진 최적화)

- 리액트, 혹은 view 렌더링이 자바스크립트 위주로 돌아가는 프로젝트는, 자바스크립트 엔진이 돌아가지 않으면 원하는 정보를 표시해주지 않는다. 이렇게 클라이언트 렌더링만 될 경우엔 검색엔진 크롤러가 어플리케이션이 지닌 데이터들을 제대로 수집하지 못해 빈 페이지로 인식한다. 검색엔진에 제대로 노출이 되지 않으니 웹페이지에의 유입이 줄어드는 결과가 발생한다.

- 구글 검색엔진은 크롤러에 자바스크립트 엔진이 내장되어 있어서 상관없지만 네이버, 다음 등의 검색엔진이 사이트를 제대로 크롤링 하게 지원해야 한다면, 서버사이드 렌더링을 따로 구현해야 한다.

- SSR은 view를 서버에서 전부 렌더링해 내려주어 html에 모든 컨텐츠가 저장되어 있다. -> 검색엔진에 최적화가 된다.

 

성능 개선

- 첫 렌더링된 html을 클라이언트에게 전달을 해주기때문에 view를 보기까지 초기 로딩속도가 빠르다. JS파일을 불러오고 렌더링 작업이 완료되기 전에도 유저가 사이트의 컨텐츠를 이용 할 수 있어다. JS파일을 전부 다운받기 전까지는 제대로 동작하지 않지만, 사용자는 빠르다 느낄 수 있다.

 

보안

사용자에 대한 정보를 서버 측에서 세션으로 관리를 해 CSR방식보다 안전하다.

 

 

단점 :

 

프로젝트의 복잡도

- 단순히 렌더링만 하는것은 그렇게 큰 문제는 아니지만, 리액트 라우터, 리덕스 등의 라이브러리와 함께 연동해서 사용하면서, 서버에서 데이터를 가져와서 렌더링을 해줘야하는 경우엔 조금 어려워질수도 있다.

 

성능 악화의 가능성

- 클라이언트에서 초기렌더링을 서버측에서 대신 하여 클라이언트의 부담을 없애주기는 하지만, 렌더링을 위한 서버 자원을 사용해 불필요하게 트래픽을 낭비할 수 있다. 서버사이드 렌더링을 하게 될 때는, ReactDOMServer.renderToString

함수를 사용하게 되는데, 이 함수는 동기적으로 작동한다. 그래서, 렌더링하는동안은 이벤트루프가 막히게 된다. 그 뜻은, 렌더링이 되는 동안은, 다른 작업을 못한다는 뜻이다. 만약 나의 프로젝트를 렌더링하는데 250ms가 걸린다면 1초에 4개의 요청밖에 처리하지 못한다는 의미이다. 치명적이다.

(하지만 동일한 페이지를 특정기간 동안 캐싱하여 성능을 최적화 하거나, 써드파티 라이브러리를 통하여 비동기식으로 작동하게끔 코드를 작성하여 이에 대처할 수 있다.)

 

 

 

 

도움이 된 정보들

 

칼럼:

https://velopert.com/3425

react-router :: 3장. 서버사이드 렌더링 | VELOPERT.LOG

https://medium.com/@donggyu9410/%EC%99%9C-%EC%84%9C%EB%B2%84-%EC%82%AC%EC%9D%B4%EB%93%9C-%EB%A0%8C%EB%8D%94%EB%A7%81%EC%9D%B4-%ED%95%84%EC%9A%94%ED%95%A0%EA%B9%8C%EC%9A%94-eb41a594f94b

왜 서버 사이드 렌더링이 필요할까요?

https://brownbears.tistory.com/411

서버 사이드 렌더링(SSR), 클라이언트 사이드 렌더링(CSR)

https://medium.com/@donggyu9410/%EA%B0%80%EC%9E%A5-%EC%89%AC%EC%9A%B4-%EB%B0%A9%EB%B2%95%EC%9C%BC%EB%A1%9C-%EB%A6%AC%EC%95%A1%ED%8A%B8%EC%97%90%EC%84%9C-%EC%84%9C%EB%B2%84%EC%82%AC%EC%9D%B4%EB%93%9C-%EB%A0%8C%EB%8D%94%EB%A7%81-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0-966702610664

가장 쉬운 방법으로 리액트에서 서버사이드 렌더링 이해하기

https://junsday.tistory.com/44

서버사이드렌더링(Server-Side-Rendering)