1990년 중반까지는 모두 정적 사이트였다.
서버에 이미 잘 만들어진 HTML 문서들이 있고 사용자가 브라우저에서 특정 주소에 접속하면 서버에 이미 배포된 HTML 문서를 보여주는 방식이다. 정적 사이트의 문제점은 링크 변경 시 다시 서버에서 해당 페이지의 HTML을 받아와서 페이지 전체가 업데이트되어야 한다는 점이다.
이후 1998년 XMLHttpRequest 기술이 도입되면서 HTML 문서 전체가 아니라 JSON과 같은 포맷으로 서버에서 가볍게 필요한 데이터만 받아올 수 있게 되었다. JS를 이용해서 동적으로 HTML 요소를 생성하고 페이지에 업데이트하는 방식이다. 이후 AJAX라는 공식적인 이름을 갖게 된다.
하지만 개발자들은 여기서 만족하지 않고 SPA(Single Page Application) 기술을 만들어내면서 웹 사이트의 전체 페이지를 하나의 페이지에 담아 동적으로 화면을 바꿔가며 표현해냈다. 사용자가 어떠한 상호작용을을 발생시키면 변경된 부분에 대해서만 변경이 일어난다.
CSR(Client Side Rendering)
최초에 HTML을 최소한의 리소스만 다운로드 받고 JS를 이용해서 필요한 곳에만 DOM을 만들고 HTML에 그려주면 어떨까? 라는 접근으로 시작됐다.
✅ HTML을 매번 불러오는 것이 아니라 필요한 부분에만 JS를 이용해 DOM 생성
History API를 통해서 라우팅 처리를 하고 DOM을 이용해서 렌더링한다.
대부분의 웹 라이브러리는 기본적으로 CSR을 사용하며 React, Vue, Angular가 대표적이다.
결론적으로 CSR은 사용자의 상호작용에 따라 필요한 부분에 대해서만 데이터를 받아와 HTML을 클라이언트에서 그려주는 방식이다.
동작 방식
- 사용자가 특정 URL로 웹 페이지 방문
- 최소한의 HTML 파일을 다운 (빈 내용의 index.html)
- 페이지 이동 시 서버에 추가 HTML 파일을 요청하지 않고 이미 존재하는 JS를 이용해 렌더링
장점
- 트래픽 감소 및 빠른 상호작용
- 이유 ? 사용자의 행동에 따라 변경된 부분의 데이터만 받아오고 변경된 부분만 다시 읽음
단점
- 사용자가 첫 화면을 보기까지 시간이 오래 걸린다.
- 이유 ? 웹 애플리케이션에 필요한 모든 정적 리소스를 최초에 한 번 다운로드 하기 때문 - 검색 엔진 최적화(SEO)가 좋지 않다.
- 이유 ? CSR에서 사용되어 있는 HTML 바디는 대부분 텅텅 비어져 있기 때문
SSR(Server Side Rendering)
전통적인 웹 어플리케이션 렌더링 방식으로 사용자가 웹 페이지에 접근할 때, 서버에 각각의 페이지에 대한 요청을 하며 서버에서 HTML 및 JS 파일 등을 모두 다운로드해서 화면에 렌더링 하는 방식
동작 방식
- 사용자가 특정 URL로 웹 페이지 방문
- 서버측에서 필요한 리소스를 가지고 HTML 생성
- 생성된 HTML 파일을 클라이언트로 전송
- 클라이언트에서 HTML을 다운로드 한 후 사용자에게 제공
- 페이지 이동 시 1~4번 반복
장점
- 첫 번째 페이지로딩이 빠르다.
- 이유 ? 첫 번째 페이지에 대한 HTML만 만들어서 보내주기 때문 - 검색 엔진 최적화(SEO)가 좋다.
- 이유 ? 모든 컨텐츠가 HTML에 담겨져있기 때문
단점
- 사용자 경헙이 좋지 않다.
- 이유 ? 페이지 이동 시 전체적인 웹사이트를 다시 서버에서 받아오기 때문 - 서버에 과부하가 걸리기 쉽다.
- 이유 ? 사용자가 클릭 할 때마다 서버에 요청을 보내기 때문
SSG(Static Site Generator)
정적 사이트 생성기라고 불리며 웹 페이지를 빌드하는 시점에 미리 HTML을 생성하고 만들어 놓은 정적 사이트를 유저들에게 전달하는 방식
동작 방식
- 사용자가 특정 URL로 웹 페이지 방문
- 웹 페이지가 빌드되는 시점에서 각 페이지별 HTML 생성
- 특정 페이지로 이동 시 미리 만들어 놓은 HTML을 유저에게 전달
장점
- 서버에 대한 부하가 CSR, SSR보다 현저히 낮다.
- 이유 ? 사이트를 생성할 때만 API를 호출하기 때문
단점
- 모든 URL에 대해 개별 HTML 파일을 생성해야 한다.
이 글을 마치며...
CSR, SSR, SSG의 특징을 이해하고 필요한 곳에 적절한 아키텍쳐를 선택하는게 좋을 것 같다.
"나는 React로만 웹 사이트를 만들거야", "나는 Next만 이용해서 웹사이트를 만들거야" 등의 생각은 위험할 수 있다는 말이다.
쇼핑몰을 생각해보면 장바구니 기능은 품절, 가격 변동 등의 정보를 실시간으로 알아야 하기 때문에 CSR로 구현하고 상세 페이지 같은 경우에는 변화가 많이 이루어지지 않기 때문에 SSG로 구현하는게 좋은 선택일 것이다.
틀린 부분이 있거나 보충해야 할 내용이 있다면 댓글이나 DM(sungstonemin)으로 알려주시면 감사하겠습니다😄
