우리가 웹개발을 진행하게 될 때 SSR과 CSR 중 어느 것을 선택할지 고민을 해봐야합니다.
이는 프로젝트의 요구 사항과 목표에 따라 다를 수 있습니다.
SSR, CSR의 장단점에 대해 공부하고, 어떠한 것을 선택할지에 대해 고민하는 시간을 갖고자 합니다.
그 전에 SPA, MPA 에 대한 이해가 필요할 것 같습니다.
SPA, MPA ?
SPA, MPA 둘 다 웹 어플리케이션 아키텍쳐의 종류들입니다.
MPA(Multi Page Application)의 경우 여러 개의 HTML 페이지를 갖고 있는 웹 페이지 표현 방식입니다.
예를 들어 A,B,C 페이지가 있다고 가정하면 MPA의 경우 독립된 페이지로 서버에서 가지고 있다가, 사용자가 필요로 할 시 각각의 페이지를 전송합니다.
쉽게 말해 서버쪽에서 렌더링 준비를 끝마친 상태로 클라이언트에 전달하는 방식
이를 SSR(Server-Side-Rendering) 방식으로 동작한다고 합니다.
SPA(Single Page Application) 하나의 HTML 페이지에 변경된 내용들을 동적으로 변경하는 것을 말합니다.
브라우저는 최초 한 번 서버에 요청하여 페이지 전체를 로드하고, 이후 특정 변경사항이 일어나는 부분만 데이터를 바인딩하는 방식으로 동작합니다.
쉽게말해 클라이언트 쪽에서 렌더링이 일어나는 방식입니다. 서버는 요청을 받으면 클라이언트에 HTML를 보내줍니다. 클라이언트는 그것을 받아 렌더링을 시작합니다.
이를 CSR(Client-Side-Rendering) 방식으로 동작한다고 합니다.
SSR vs CSR
그렇다면 두 가지 방식 중 어느 것을 사용해야 보다 웹페이지를 효율적으로 개발할 수 있을까요?
각 방식이 가지는 장/단점을 알아보았습니다.
SSR
장점
클라이언트에서 요청한 페이지의 HTML을 다운로드 하고, 서버에서 완성된 상태로 클라이언트로 다시 보내지게 됩니다.
클라이언트는 이 HTML을 받아와 렌더링하고, 사용자에게 표시합니다. -> CSR에 비해 초기 진입 시 로딩이 빠름
서버에서 렌더링 후 개별 페이지를 넘겨받기 때문에 페이지에 대한 정보를 입력하기 쉽습니다. ->SEO 향상
단점
링크 이동 시 매번 새로운 HTML 파일을 서버에서 받아오기 때문에 화면 깜빡임 현상이 있습니다.
그렇기에 잦은 링크 이동 시 성능에 부하를 줄 수 있습니다 -> 사용자경험 ↓
새로운 HTML을 받아오기 때문에 중복되는 내용 또한 리렌더링 됩니다. -> 페이지 이동이 CSR에 비해 느림
완성된 HTML파일을 JavaScript파일보다 먼저 받아오기 때문에 JavaScript 다운로드가 늦어지면 화면만 렌더링되고 기능이 동작하지 않을 수 있습니다.
CSR
장점
서버에서 HTML파일을 보내주고, 클라이언트 측에서 JavaScript 파일을 다운로드 및 실행하여 동적으로 DOM을 그려냅니다.
때문에 원하는 내용만 따로 업데이트가 가능합니다.-> 중복내용 고정, 안에 콘텐츠만 업데이트, 페이지 이동 빠름
단점
HTML파일을 하나만 받아와서 작동하다 보니 페이지에 대한 정보를 담기 힘듬 -> SEO 취약
첫 로드 시, 모든 로직이 담겨있는 JavaScript를 다운로드 해야하므로 SSR에 비해 비교적 로딩속도가 느림
JavaScript 다운 및 실행 되기 전까지는 blank페이지 이기 때문에 페이지 캐싱이 잘 안됩니다.
-> 캐싱이 잘되면 데이터 비용 절감 가능
그렇다면 프로젝트 목적에 따라 SSR, CSR 방식 중 선택하여 사용하면 될 것입니다.
이러한 단점들은 극복이 안되는 것일까?
우선 제가 프로젝트 진행 시 사용했던 브라우저 렌더링 방식인 CSR에 대해 먼저 알아보겠습니다.
CSR 단점 극복
-
초기 로딩 속도 향상 : 코드 스플리팅과 번들 최적화를 통해 불필요한 컴포넌트 렌더링을 막아 초기 로딩시간을 줄일 수 있습니다.
-
SEO 향상 : 미리 렌더링 된 HTML 서비스를 이용하는 방법이 있습니다. Prerender.io, Puppeteer 등의 SEO 개선을 위한 서버들을 사용하여 미리 HTML파일을 저장하고 렌더링할 수 있습니다.(스냅샷 생성)
클라이언트 측에서 웹페이지 요청 시 이 스냅샷을 제공함 -> 검색엔진 크롤러가 쉽게 읽을 수 있음
스냅샷만 제공해주어 SEO를 해결한 것이지, 클라이언트 쪽에서 JavaScript를 통해 렌더링 되는것은 변함없음
SSR 단점 극복
-
서버 성능 향상 : 매번 새로운 HTML 페이지 요청을 하기 때문에 서버의 부하를 초래할 수 있습니다. 이를 위해 서버 클러스터링, 캐싱, 로드 밸런싱 등의 기술을 사용하여 성능을 향상 시킬 수 있습니다. -> 페이지 이동속도 향상
이러한 단점을들 극복할 수 있는 기술들이 있다면, 장점들만 모아놓은 프레임워크 또한 존재할 것이라고 생각했습니다.
유니버셜 어플리케이션? Isomorphic ?
CSR과 SSR 각각의 장점들을 모두 가진 웹 어플리케이션을 유니버셜 어플리케이션 or Isomorphic 어플리케이션이라고 합니다.
이 유형의 프레임워크 종류들 몇가지를 알아보겠습니다.
Next.js : React 기반의 프레임워크로 SSR,CSR 자동처리 기능, 페이지 단위로 SSR, CSR 설정
Nuxt.js : Vue 기반의 프레임워크로 Vue.js 어플리케이션을 손쉽게 SSR로 변환
Gatsby : React기반의 정적 사이트 생성기이지만 SSR과 CSR 혼합하여 사용 가능
웹 어플리케이션의 요구사항, 개발자 선호도에 따라 선택하여 사용하면 됩니다.
이번 공부를 통해 각 렌더링 방식, 프레임워크들마다 장/단점, 이를 극복하는 방법들에 알게 되었습니다.
이를 토대로 프로젝트의 목적에 따라 맞는 프레임워크들을 선택하며, 발생할 수 있는 단점들을 극복, 장점들은 최대화 할 수 있을거라 생각합니다.
