요즘 프론트엔드 개발형식은 자주 쓰이는 React, Vue, Angular 등 자바스크립트 기반으로 되어있는 프레임워크, 라이브러리로 개발을 한다.
이제 본론으로..
CSR과, SSR의 차이점에 대해 공부하다보니 SPA, MPA의 차이점을 먼저 알고넘어가는 것이 좋겠다고 생각함
SPA와 MPA의 차이
SPA(Single Page Application)
SPA란, Single Page Application의 약자로, 하나의 페이지로 구성된 웹 애플리케이션이다. SPA로 개발된 웹사이트에서는 카테고리에 있는 각 메뉴를 선택하면 보통 헤더는 고정되어 있는 상태로 메인화면 혹은 클릭한 부분만 바뀐다.
MPA(Multi Page Application)
반면 MPA란, Multi Page Application의 약자로, 탭을 이동할 때마다 서버로부터 새로운 HTML을 새로 받아와서 페이지 전체를 렌더링 하는 전통적인 웹 페이지 구성 방식이다.
일반적으로는 SPA에서는 CSR로 렌더링하고, MPA에서는 SSR로 렌더링 한다.
SPA는 웹 애플리케이션에 필요한 정적 리소스를 한꺼번에 모두 다운로드하고, 이후 새로운 페이지 요청이 왔을 때 필요한 데이터만 전달받아서 클라이언트에서 필요한 페이지를 갱신하기 때문에 CSR로 렌더링 하는 반면에, MPA는 새로운 요청이 있을 때마다 서버에서 이미 렌더링 된 정적 리소스를 받아오기 때문에 SSR로 렌더링 한다.
다만, 이러한 특징 때문에 SPA = CSR, MPA = SSR이라는 오해가 생기긴 하나, 이 두 개념은 페이지의 개수와 렌더링을 어디서 하는지 등에 따라 다른 개념이다.
CSR과 SSR
CSR(Client Side Rendering)
CSR이란, 클라이언트인 브라우저가 렌더링을 처리하는 방식. 즉, 서버에서 받은 데이터를 통해 클라이언트(브라우저)가 View단을 그리는 주체가 되는것.
CSR 로딩순서
- 유저가 서버에 요청을 보낸다.
- CDN이 HTML과 JS 파일에 접근할 수 있는 링크를 클라이언트로 보낸다.
- 클라이언트가 파일을 전부 다운로드하기 전까지, 웹사이트를 볼 수도, 조작할 수도 없다.
- 다운로드가 완료되면 HTML과 JS 파일을 실행한다.
- JS 파일까지 실행이 완료되면 웹사이트는 상호작용이 가능한 상태가 된다.
- View 렌더링을 브라우저에게 시키면서 서버 트래픽을 감소시키고, 사용자에게 더 빠른 인터렉션을 제공 해준다.
- 새로고침이 발생하지 않아 사용자 경험이 더 향상된다. - 서버에 첫 요청시, 전체 페이지에 대한 모든 파일을 받다보니 서버 사이드렌더링 보다 초기페이지 로딩속도가 느리다.
- SEO 작업에 대한 추가 보완 작업이 필요하다. 구글의 검색엔진의 경우, 자바스크립트 엔진이 내장되어 있어
크롤링이 가능하지만, 네이버. 다음과 같은 포탈의 경우 검색엔진이 제대로 크롤링 하지 못함SSR(Server Side Rendering)
SSR이란, 클라이언트가 서버에 매번 데이터를 요청하여 서버에서 처리하는 방식이다.
클라이언트에서 요청을 받을 때 마다 매번 서버에서 새로운 View단을 만들어 제공함
CSR과 다르게 서버가 View를 그려주는 주체가 된다.
SSR 로딩순서
- 유저가 서버에 요청을 보낸다.
- 서버는 즉시 렌더링 가능한 HTML 파일을 만든다.
- 클라이언트에 전달되면 즉시 렌더링 된다.
- 클라이언트가 자바스크립트를 다운로드한다.
- 다운로드가 완료되면 자바스크립트 프레임워크를 실행한다.
- 자바스크립트 프레임워크가 실행되면 웹사이트는 조작 가능한 상태가 된다.
- 첫 페이지에 해당하는 문서만 브라우저에게 전달하여 브라우저가 렌더링하기 때문에 초기 로딩속도가
CSR에 비해 더 빠르며, SEO처리가 가능하다.- 페이지를 이동할 때 마다 클라이언트가 서버에게 필요한 데이터를 요청, 서버에서 응답해주는 방식이다 보니,
첫 페이지를 제외한 렌더링 속도가 다소 느리다. 상황에 따른 사용 예시
| CSR | SSR |
|---|---|
| - 네트워크 빠를 때 | - 네트워크가 느릴 때 |
| - 검색엔진 최적화가 필요 없을 때 | - 검색엔진 최적화가 필요할 때 |
| - 페이지 상호작용이 많이 필요할 때 | - 페이지 상호작용이 별로 없을 때 |
- 예시에 따라 꼭 사용해야만 하는것은 아니지만, 일반적으로 이렇게 사용하는게 좋다
TMI
저번 면접때 정말 기본적이고, 익숙한 단어인 프레임워크와 라이브러리 이 두개의 차이점에 대해 제대로 답변하지 못한것이 기억에 남는다. 차이점이라기 보단, 라이브러리, 프레임워크 모두 개발자들에게 도움을 주는것 이라고만 답변을 했는데,
프레임워크는 프로그램이 필요한것을 개발자에게 알려줌으로써 제어권을 역전하고, 라이브러리는 개발자가 필요할 때 마다 설치, 혹은 호출함으로써 개발자가 능동적으로 사용하게 된다.
비슷한 말 같지만 명확하게는 "제어권 흐름?의 권한을 누가 갖느냐" 이 차이점이 있는것 같다.
마찬가지로 CSR, SSR도 CSR에 최적화된 리액트를 사용함에 있어서 꼭 알아두어야 할 필요성이 있는데, 이제서야 개념정리를 한 내가 원망스럽다..
