SSR (Server Side Rendering)
SSR은 Server Side Rendering의 줄임말이다.웹 페이지를 브라우저에서 렌더링하는 대신에, 서버에서 렌더링 한다. 브라우저가 서버의 URI로 GET 요청을 보내면, 서버는 정해진 웹 페이지 파일을 브라우저로 전송한다 그리고 서버의 웹 페이지가 브라우저에 도착하면 완전히 렌더링이 된다. 서버에서 웹 페이지를 브라우저로 보내기 전에, 서버에서 완전히 렌더링했기 때문에 Server Side Rendering 이라고 한다. 웹 페이지의 내용에 데이터베이스의 데이터가 필요한 경우, 서버는 데이터베이스의 데이터를 불러온 다음 웹 페이지를 완전히 렌더링 된 페이지로 변환한 후에 브라우저에 응답으로 보낸다.브라우저가 다른 경로로 이동할 때마다 서버는 이 작업을 다시 수행합니다.
CSR (Client Side Rendering)
CSR은 최초 요청시에 HTML을 비롯해 CSS, Javascript 등 각종 리소스를 받아온다. 이후에는 서버에 데이터만 요청하고, 자바스크립트로 뷰를 컨트롤 한다.
초기 요청 때 SSR 보다 많은 리소스를 요청하기 때문에, 렌더링은 속도는 SSR이 더 빠르다.
하지만 이후 다른 페이지로의 이동시에는 SSR 보다 빠른 페이지 전환 속도와 더 나은 사용자 경험을 제공한다.
만약 인터넷 속도가 느리다면, 유저는 제대로된 화면을 한참 후에나 만나볼 수 있을 것이다.
key Point
CSR과 SSR의 주요 차이점은 페이지가 렌더링되는 위치다. SSR은 서버에서 페이지를 렌더링하고, CSR은 브라우저(클라이언트)에서 페이지를 렌더링한다. 브라우저는 사용자가 다른 경로를 요청할 때마다 페이지를 새로고침 하지 않고, 동적으로 라우팅을 관리한다.
