<aside> 💻 CSR 알아보기
</aside>
<aside> 💡
Server-Side Rendering(이하 SSR)은 말 그대로 서버에서 먼저 HTML을 렌더링한 뒤 이를 클라이언트에 전달하는 방식
</aside>
서버에서 진행하는 렌더링을 서버 사이드 렌더링이라고 부른다.
서버 사이드 렌더링은 보통 웹 콘텐츠가 많을 때 많이 쓰이는 렌더링 방식으로, 서버에서 콘텐츠를 만들어서 웹으로 내려보내 렌더링을 하는 방식이다.
여기서 서버에서 콘텐츠를 만들어서 웹으로 내려보낸다는 의미는, 서버에 존재하는 데이터베이스(DB)에서 마련된 API를 받아와 그 API에서 필요한 데이터를 받고, 그 데이터를 통해서 HTML을 만드는 것이 모두 서버에서 이뤄진다는 뜻이다.
SSR을 통해 서버에서 이미 렌더 가능한 상태로 클라이언트에 전달되기 때문에, JS가 다운로드 되는 동안 사용자는 무언가를 보고 있을 수 있다.
이렇게 서버에서 HTML을 만들어줘서 웹으로 내려보내주는 서버 사이드 렌더링은, 브라우저에서 DOM을 생성하고, 그 DOM을 다시 HTML로 내려줘서 그리게끔 하는 클라이언트 사이드 렌더링보다 속도 면에서 훨씬 이점을 보인다. 왜냐하면 서버가 가진 컴퓨팅 파워, 즉 자체적인 성능이 브라우저가 가진 성능보다 훨씬 우월하기 때문이다.
또한 검색 엔진에서 서버 사이드 렌더링으로 만든 웹사이트를 우선적으로 노출시킬 수 있다. 이것은 검색 엔진 최적화라고도 한다. 서버 사이드 렌더링을 사용하면 콘텐츠가 뜨는 속도가 클라이언트 사이드 렌더링보다 빠르기 때문에, 훨씬 빠르게 웹사이트가 뜰 것이고, 그렇기 때문에 상위 노출이 가능해져 최적화에 훨씬 유리하다.
잘했어 라이코스 나는 본 적이 없는 라이코스(나는 매우 young하기 때문이다)
잘했어 라이코스 나는 본 적이 없는 라이코스(나는 매우 young하기 때문이다)
Web 1.0 사이트들은, 주요 로직과 렌더링을 전부 서버에서 처리하고, 브라우저는 요청-응답을 통해 단순히 받은 HTML을 표시했다. 자바스크립트는 아주 간단한 기능(폼 검증, 팝업, 이미지 슬라이드 정도)을 구현하는 수준이었다.
즉, 주요 로직이 서버 쪽에서 이뤄지고, 클라이언트는 ‘결과물(HTML)’만 수동적으로 받는 구조로 정적 HTML, SSR 혼재의 시대였다.
