서버사이드 렌더링(Server-Side-Rendering)이란?
-페이지 요청시마다 새로고침이 일어나며 서버에 새로운페이지에 대한 요청을 하는 방식이다. 예를 들자면 필요한 물건이 있을때마다 마트에 장을 보러 가는 것과 비슷하다. 그리고 페이지가 어떻게 보여지는지 또한 서버에서 해석하여 보내주는 방식이다.
*Rendering: 웹페이지 접속시, 요청받은 내용을 브라우저 화면에 표시해주는 것이다.
*렌더링 과정
1. Loader가 서버로부터 정보를 불러옴
2. 파싱을 통해 문서를 DOM 트리로 만든다
3. DOM 트리가 구축되는 동안 브라우저는 렌더 트리를 구축
4. CSS 설정/레이아웃 위치 지정
5. 렌더링 트리가 그려짐
*장점
-서버사이드 렌더링의 경우 첫화면이 나오는 속도가 굉장히 빠르다. 다만 javascript파일을 모두 불러와서 적용하기 전까진 반응하지 않을 수 있지만 첫 화면이 보여지는건 굉장히 빠름.
-SEO(Search Engin Optimization) 검색엔진 기능 최적화에 유리한 편이다. 페이지를 서버에서 전부 렌더링하여 주기 때문에 HTML에 모든 컨텐츠가 저장되어 있기 때문이다.
*단점
-장점을 제공하는 만큼 프로젝트를 제작하는데에 있어 어렵고 번거롭다. SSR을 구현할 경우 프로젝트의 구조가 굉장히 복잡해질 수 있다.
-페이지 변경 시 서버에 계속 요청해야되서 서버에 큰 부담이 간다. 정보가 많은 B2C 웹 서비스(예를 들면, 옥션, g마켓 등이 있다) 등에는 서버 부담이 크다. 요청 시 마다 새로고침이 일어나며 페이지를 로딩할 때 마다 서버로부터 리소스를 전달받고 화면에 렌더링하기 때문이다. 사용자와 인터렉션이 많은 요즘의 웹앱에는 부담이 가는 방법일 수 있다. 서버에서 렌더링을하면 서버자원이 계속 사용되고, 불필요한 트래픽이 낭비되는 것이기 때문이다.
