SPA? MPA? CSR? 자주 등장하는 단어들인데 비슷한 모양이라 헷갈려서 정리를 한 번 해볼려고한다.
들어가며
일단 이 단어들은 렌더링에 관련된 단어들이다.
웹 렌더링(Web Rendering)이란? 웹 페이지를 사용자에게 보여주는 과정을 의미한다.
그리고 SPA와 MPA에 대해서도 알고 가면 좋은데
SPA: Single Page Application
하나의 HTML 페이지에서 새로운 페이지를 불러오지않고 필요한 부분만 동적으로 컨텐츠를 바꾸는 애플리케이션을 말한다. (React, Vue, Angular)
MPA: Multiple Page Application
여러 개의 페이지로 이루어져 있으며 사용자가 페이지를 요청할 때마다 서버에서 렌더링된 HTML를 받아와서 컨텐츠를 변경하는 애플리케이션을 말한다.
정리하자면 SPA는 첫 페이지만 서버에서 받아오고 필요한 부분만 동적으로 변경하고 MPA는 페이지가 달라질 때마다 서버에서 렌더링 된 파일들을 받아온다.
이제 이러한 애플리케이션을 구현하기 위해 쓰이는 렌더링 방식이 CSR, SSR ... 이다!
CSR(Client Side Rendering)
클라이언트 사이드 렌더링으로 웹 브라우저에서 JavaScript를 사용하여 웹페이지를 렌더링하는 방식이다. 즉, 사용자의 브라우저가 서버로부터 데이터를 받아와서 웹 페이지를 직접 생성한다.
SPA(React, Vue, Angular)가 사용하는 렌더링 방식을 의미한다. 쉽게 말하자면 렌더링이 클라이언트 측에서 일어나는 방식이다.
SSR(Server Side Rending)
서버 사이드 렌더링으로 서버에서 HTML을 완성하여 브라우저로 보내는 방식이다. 즉, 새로운 페이지로 이동할 때마다 서버에서 렌더링을 마친 HTML을 받아와서 렌더링한다.
MPA를 구현할 때 사용되며 서버측에서 렌더링을 담당하는 방식이다.
❓궁금한점
Q) 각각 어떤 페이지를 구현할때 좋은가?
A) CSR: 사용자와의 상호작용이 많은 웹사이트나 검색엔진이 중요하지않은 웹사이트
SSR: 동적 콘텐츠가 많은 웹사이트, 콘텐츠가 실시간으로 변경되고 항상 최신 상태의 웹사이트
Q) 내 생각에는 대부분의 웹페이지가 콘텐츠가 실시간으로 바뀌지않나?
A) 내가 콘텐츠가 실시간으로 바뀐다고 생각했던 것은 사실 사용자와의 상호작용이 많은 것과 헷갈렸던 부분이다.
정리하자면 CSR은 소셜 미디어나 주식 차트 등과 같이 사용자의 행동이 즉시 반영되고 실시간 데이터에 따라 변경되어야하는 웹사이트에 적합하고 SSR은 뉴스 웹사이트, 블로그, 전자상거래 상품 페이지 등 동적 콘텐츠가 페이지 요청마다 갱신되어야하는 경우에 적합하다.
따라서 이 두 강점을 모두 활용하기 위해 Next.js 프레임워크를 사용하게 된 것이다~!
SSG(Static Site Generation)
정적 사이트 생성으로 빌드 시에 모든 페이지를 HTML로 미리 생성하는 방식이다. 즉 매 요청마다 HTML을 재사용한다. 따라서 회사, 제품 소개(마케팅 페이지), 블로그 게시물과 같이 요청마다 동일한 정보로 반환하는 경우에 사용된다.
ISR(Incremental Static Regeneration)
증분 정적 재생성으로 빌드 시점에 페이지를 미리 생성하면서도 특정 시간 간격으로 페이지를 재생성하여 업데이트된 데이터를 반영할 수 있게 한다. 즉, 일부페이지는 자주 업데이트되고 다른 일부 페이지는 그렇지 않은 경우에 사용할 수 있다.
마무리하며
이번 정리를 통해 Next.js를 사용하게 된 이유도 알게 되었고 헷갈렸던 개념을 확실히 정리할 수 있었다. 렌더링되는 과정을 이해하는 것이 코드를 구현하는데 더 효율적으로 다가갈 수 있다고 생각하여 중요하게 느껴진다. 렌더링 되는 과정을 생각하며 거기에 맞는 기술을 더 공부하고 사용해봐야겠다.
출처 및 참고
https://yong-nyong.tistory.com/86
https://www.enjoydev.life/blog/frontend/5-csr-ssr
https://enjoydev.life/blog/nextjs/1-ssr-ssg-isr
