SSR과 CSR
안녕하세요 🐸 SSR과 CSR에 대해 알아보겠습니다.
그리고 이와 함께 많이 언급되는 SPA, MPA 에 대해서도 간략하게 알아보겠습니다.
Server Side Rendering(SSR)
Server Side Rendering은 Client Side Rendering 과는 다르게 초기 접근 부터 사용자에게 보여줄 HTML 코드를 가지고 있습니다. 덕분에 CSR이 가지는 단점을 갖지 않습니다.
Client Side Rendering(CSR)
CSR은 클라이언트의 브라우저가 화면을 렌더링 하는 방법 입니다.
전체 페이지가 변경되지 않고 필요한 부분만 렌더링하기 때문에 속도가 빠르고 사용자 경험을 향상 시킵니다. 하지만 단점도 있는데요.
Client Side Rendering(CSR)인 앱의 개발자도구에서 소스를 확인하면 최초 페이지 접근 시에는 비어있는 div 요소 외에는 아무 것도 없습니다. 스크립트 파일이 화면을 렌더링 하기 때문입니다.
이는 개발자도구에서 디버그를 통해 확인할 수 있습니다.
Client Side Application의 렌더링 단계 예시
id가 root인 요소만 존재하는 모습
스크립트가 실행되어 렌더링된 모습
결국 브라우저가 스크립트 파일을 다운로드 하고 html을 렌더링 하는 시간이 있기 때문에 잠깐의 공백이 발생합니다.
일부 기능은 Client Components 에서만 동작합니다. 예를 들면 usePathname() 같은 것들이 이에 해당합니다.
그리고 이처럼 자바스크립트가 화면을 렌더링 하기 때문에 검색엔진에서 이를 읽지 못하는 문제가 발생할 수 있습니다.
Single Page Application (SPA)
직역한 뜻처럼 하나의 페이지로 이루어진 앱을 의미합니다.
SPA는 자바스크립트를 통해 화면이 렌더링 됩니다. 그렇기 때문에 CSR이 가지는 단점인 최초 접근 시 생기는 공백 및 검색 엔진 크롤링 부분에서 비교적 불리합니다.
Multiple Page Application (MPA)
영어 그대로 다수의 페이지를 가지는 앱을 의미합니다.
요약
CSR과 반대되는 개념은 SSR 입니다.
SPA와 반대되는 개념은 MPA 입니다.
간혹 CSR과 SPA를 동일하게 설명하고 MPA를 SSR과 같다 설명하는 곳이 있습니다.
하지만 이는 잘못된 정보로 엄연히 구분 방법이 다른 개념입니다.
제 나름 개발자가 아닌 사람이 들어도 이해할 수 있도록 표현해보자면…
불과 반대되는 것은 물이고, 불은 빨갛고 물은 파랗다고 해서 빨간 것은 반드시 불이고 파란 것은 반드시 물이 아니다 정도일까요?