이 글은 CSR, SSR, SSG, ISR 과 SPA, MPA 에 대한 간략한 설명을 포함하고 있습니다.
CSR, SSR, SSG, ISR, SPA, MPA
모두 프론트엔드 공부를 하다보면 한번쯤 마주치는 친구들입니다.
이 개념에 대해 확실히 알고 가야 본인의 상황에 맞는 렌더링 기법을 선택할 수 있기 때문에
한번 알아보는 시간을 가져봅시다!
자 먼저 CSR 이니 SSR 이니 이런 렌더링 기법들을 보기 전에
그 이전엔 어떻게 웹페이지를 사용자에게 보여줬는지 간단하게 봐봅시다.
AJAX 등장 이전
자 먼저 초기 웹페이지, 여기서는 AJAX 이전의 웹페이지라고 하겠습니다.
이때는 사용자가 페이지를 요청하면 서버에서 전체 HTML 파일을 가져다 주는 방식이었습니다.
예를 들어 여러분이 쇼핑을 하다가 다음 페이지의 물건들을 보고싶어서 다음 페이지를 누른다고 가정할 때,
AJAX 이전 방식에서는 페이지 자체를 새로 서버로부터 받아야 했습니다. 이 과정에서 깜빡거리는 현상이 발생하여 사용성이 좋지 못했습니다.
AJAX 등장 이후
그렇게 혜성같이 등장한게 AJAX 입니다.
AJAX 덕분에 클라이언트(브라우저)와 서버가 비동기적으로,
즉, 페이지 전체를 새로고침하지 않고도 데이터를 주고받을 수 있게 되었습니다.
예전에는 서버에 뭘 요청하든 항상 전체 HTML 파일이 돌아왔지만,
AJAX 이후에는 필요한 데이터만 받아올 수 있게 된 거죠.
서버는 클라이언트가 요청한 데이터만 JSON, XML 등의 형식으로 전달하고,
브라우저는 이를 받아 원하는 부분만 동적으로 변경하는 방식으로 깜빡거리는 현상 없이 작업을 수행하는게 가능해진겁니다.
CSR
그럼 아예 클라이언트에서 모든 렌더링을 처리하면 어떨까요?
서버에 페이지 요청을 할 필요 없이 클라이언트가 전부 렌더링 한다면,
마치 앱과 같이 부드러운 화면 전환과 이펙트가 가능하겠죠
서버는 그냥 빈 HTML과 JS 번들만 던져주고,
브라우저가 직접 HTML을 만들어서 보여주는 방식이 바로 CSR(Client Side Rendering)입니다.
이 방식을 확장하면, 하나의 HTML로 전체 앱을 구성하고 페이지 전환을 JavaScript로 처리하는 SPA(Single Page Application) 가 됩니다.
여기서 잠깐 SPA 와 MPA 에 대한 설명을 하고 넘어가자면,
MPA
MPA(Multi Page Application) 는 여러 페이지가 각각의 HTML 파일로 나뉘어 있고,
페이지를 이동할 때마다 서버에서 새로운 HTML 파일을 받아옵니다.
그래서 페이지를 이동할 때마다 화면이 깜빡거리는 현상이 있었죠.
SPA
반면, SPA(Single Page Application) 는 오직 하나의 HTML 파일을 서버로부터 받습니다.
브라우저 주소는 바뀌지만,
사실 JavaScript가 HTML 안의 내용을 바꿔치기해서 마치 다른 페이지로 이동한 것 같은 효과를 주는 거죠.
네, 아무튼 CSR 을 사용해 SPA 를 구현할 수 있습니다.
처음에 빈 HTML 과 JS 번들을 클라이언트에게 주고,
그 이후의 페이지 이동은 모두 CSR 로 클라이언트에서 해결하게 하면 됩니다.
CSR 을 활용하면 클라이언트에서 모든 렌더링을 담당하기 때문에, 엄청나게 부드러운 웹페이지를 개발할 수 있습니다.
하지만 큰 단점 두가지가 존재합니다.
앞서 설명했듯이 CSR 방식에서는 사용자가 사이트에 처음 접속할 때 브라우저는 거의 빈 HTML만 받고, 실제 화면은 JS가 모두 로드된 후에야 그려집니다.
이렇게 되면 JS 를 로드하고 HTML 을 만들고 화면에 보여주기 때문에 처음 화면이 뜨기까지 시간이 오래 걸리게 됩니다.
또, 서버는 빈 HTML 만 주므로, 검색엔진이 페이지 내용을 제대로 읽지 못해서 검색 결과에 잘 노출되지 않는 문제가 생길 수 있습니다.(SEO 이슈)
SEO 가 별거 아니라고 생각할수도 있지만
웹페이지의 노출은 수입에 직결될 수 있기 때문에,
이런 문제를 해결하기 위해서는 CSR 방식이 아닌 SSR, SSG, ISR 같은 다양한 렌더링 방식을 시도할 필요가 있습니다.
쉬어가기
위에서 CSR 을 사용해 SPA 를 구현한다고 했습니다.
그러면 CSR 을 사용한 MPA 가 가능한지 갑자기 궁금해졌습니다.
찾아보니 불가능하다는 사람도 있지만, 기술적으로는 가능하지 않을까 하고 예상해봅니다.
앞에서 CSR 은 서버로부터 JS 번들을 전달받고 이를 통해 클라이언트에서 HTML 을 생성해 렌더링하는 방식이라고 했습니다.
그럼 클라이언트가 새로운 페이지를 요청할때마다 새로운 JS 번들을 전달받고 새로운 HTML 파일을 생성하면 CSR 을 사용한 MPA 뚝딱 아닙니까?
물론 그렇게 되면 CSR 의 이점인 부드러운 전환이 사라지기 때문에 실무에서는 사용하지 않는 것 같습니다.
SSR
CSR의 단점을 보완하기 위해 등장한 방식이 바로 SSR(Server Side Rendering)입니다.
SSR은 이름 그대로, 서버에서 화면을 그려주는 방식 입니다.
예를 들어 사용자가 어떤 페이지를 요청하면,
서버가 그 자리에서 완성된 HTML을 만들어서 브라우저로 보내줍니다.
이렇게 하면 어떤 점이 좋을까요?
첫 화면이 정말 빠르게 뜹니다.
사용자는 기다림 없이 바로 내용을 볼 수 있습니다.
이 이유에는 클라이언트에게 HTML 파일을 전달하는 전송 속도가 CSR 방식의 복잡한 JS 번들을 전송하는 것보다 빠르기 때문도 있지만,
SSR 을 사용하는 프레임워크는 대부분 "하이드레이션" 이라는 것을 하기 때문에
첫 화면이 더 빠르게 렌더링됩니다.
하이드레이션은 서버가 브라우저에게 HTML 을 전달하는 과정에서
JS 의 기능적인 요소는 제외하고 전달하여 빠르게 화면이 보이게 하고,
나중에 JS 번들을 보내 상호작용이 안되는 화면에 기능을 입히는 것을 의미합니다.
그렇기 때문에 초반에 빠르게 페이지가 렌더링 되지만 하이드레이션이 진행되기 전에는 상호작용이 되지 않아 버튼을 누르거나 해도 아무런 반응이 없는 현상을 볼 수 있습니다.
검색엔진(구글, 네이버 등)이 페이지 내용을 쉽게 읽을 수 있습니다.
서버가 이미 완성된 HTML을 주기 때문에 SEO(검색엔진 최적화)에 아주 유리합니다.
하지만 단점도 있습니다.
사용자가 페이지를 요청할 때마다 서버가 HTML을 새로 만들어야 하니, (MPA 방식이군요!)
서버에 부담이 커질 수 있습니다.
서버에서 데이터를 가져오고, 화면을 만들고, 보내주는 과정이 복잡해질 수 있어요.
그래서 SSR은
뉴스 사이트, 쇼핑몰, 블로그 등
첫 화면이 빠르고, 검색엔진 노출이 중요한 서비스에 많이 사용됩니다.
Next.js 같은 프레임워크가 대표적으로 SSR을 지원합니다.
SSG
SSR도 좋지만,
트래픽이 많거나 페이지가 엄청 많아지면
서버가 힘들어질 수 있습니다.
그래서 등장한 방식이 바로 SSG(Static Site Generation),
즉, 정적 사이트 생성이에요.
SSG는
사이트를 배포(빌드)할 때,
미리 모든 페이지의 HTML을 만들어 두는 방식입니다.
사용자가 페이지를 요청하면
서버는 이미 만들어진 HTML 파일을 그냥 바로 보내주기만 하면 됩니다.
장점은?
속도가 정말 빠릅니다!
서버가 할 일이 거의 없으니까요.
하지만 역시 단점도 존재합니다.
페이지 내용이 자주 바뀌는 사이트에는 부적합합니다.
새로운 글이나 데이터가 반영되려면
사이트 전체를 다시 빌드해야 되기 때문입니다.
그래서 SSG는
블로그, 문서 사이트, 회사 소개 페이지 등
내용이 자주 바뀌지 않는 사이트에 딱입니다.
ISR
“근데…
SSG처럼 빠르면서도,
데이터가 바뀌면 자동으로 최신 내용이 반영되면 안 될까?”
이런 고민에서 나온 게 바로
ISR(Incremental Static Regeneration),
즉, 증분 정적 재생성입니다.
ISR은
SSG처럼 미리 HTML을 만들어두지만,
특정 페이지에 한해
일정 시간마다(혹은 조건에 따라) 새로 빌드해서 최신 데이터를 반영합니다.
- 일정 시간마다 새로빌드
- 조건에 따라 새로 빌드
블로그 글이 자주 추가되거나 수정되는 경우,
ISR을 사용하면 새 글이 올라올 때마다
전체 사이트를 다시 빌드하지 않아도 됩니다.
장점은?
SSG의 빠른 속도와 서버 부하 감소 효과를 유지하면서
데이터가 바뀌면 자동으로 최신 내용으로 갱신 가능합니다.
단점도 있습니다.
아주 실시간 데이터에는 한계가 있습니다.
(몇 초~몇 분 단위로 갱신)
마치며...
간단히 CSR, SSR, SSG, ISR 에 대해 알아보았습니다.
이해가 잘 되셨나요?
공부를 해도 계속 어딘가 근질거리는 부분들이 있는것 같습니다.
부족한 부분이 많겠지만 계속 배워가는게 또 묘미 아니겠습니까!
이 게시글을 보시고
어떤 렌더링 방식을 선택할지에 대한 고민을 할 수 있게 되었으면 좋겠습니다.
참고자료
https://developer.mozilla.org/ko/docs/Glossary/AJAX
https://leesangwondev.vercel.app/spa%EC%99%80-mpa-%EA%B7%B8%EB%A6%AC%EA%B3%A0-csr-ssr-ssg
https://www.inflearn.com/course/%ED%95%9C%EC%9E%85-%ED%81%AC%EA%B8%B0-nextjs/dashboard
