최대 1 분 소요

웹 렌더링 기술에 대해 알아보자!

CSR(Client Side Rendering)

CSR은 브라우저에서 자바스크립트를 이용하여 단일 웹페이지 상의 HTML 요소를 동적으로 생성하고 조작한다. 따라서 서버 측에서는 텅빈 HTML 문서 하나와 자바스크립트 코드만 내려주고 그 이후에 모든 일들은 클라이언트 측에서 브라우저가 비동기로 처리한다. 대표적으로 SPA가 있다.


SSR(Server-Side Rendering)

SSR은 서버 측에서 웹페이지를 랜더링하는 기술이다. SSG와 가장 큰 차이점은 빌드 타임에 웹사이트 전체를 미리 만들어 놓는 것이 아니라, 클라이언트로 부터 요청이 들어올 때마다 실시간으로 해당 웹페이지를 만들어낸다는 것이다. SSR을 사용하려면 서버 측에서 웹페이지를 랜더링하기 위해서 애플리케이션 서버가 추가로 필요하다.


SSG(Static Site Generator)

SSG는 누가 접속하든 항상 동일한 내용을 보여주는 웹사이트를 만드는데 최적화된 방법이다.제품 카탈로그나 개인 블로그처럼 컨텐츠의 변경이 자주 일어나지 않는 비교적 소규모 웹사이트를 제작할 때 유용하다.

SSG의 가장 큰 단점은 아무래도 빌드 시점에 웹사이트 전체를 매번 다시 만들어 내다 보니 컨텐츠가 자주 업데이트되는 웹사이트에서는 큰 비효율이 발생하게 된다. 보통 웹사이트의 규모가 커지면 자연스럽게 빌드(build) 시간이 길어지는데, 이러면 변경된 컨텐츠가 웹사이트에 반영되는데 시간이 점점 오래 걸리 게 되기 때문이다.


참고

댓글남기기