✔ CSR, SSR, SSG
알아야 할 SPA와 MPA
SPA
SPA(Single Page Application)는 하나의 페이지로 구성된 웹 애플리케이션이다.
웹 애플리케이션에 필요한 모든 정적 리소스를 최초 한 번에 다운로드하고, 그 후 새로운 페이지 요청이 있을 때 페이지 갱신에 필요한 데이터만 전달받아서 페이지를 구성한다.
클라이언트 관점에서 말하자면, 최초에 페이지를 로딩한 시점부터는 페이지 리로딩 없이 필요한 부분만 서버로부터 받아서 화면을 갱신하는 것이다. 필요한 부분만 갱신하기 때문에 네이티브 앱에 가까운 자연스러운 페이지 이동(화면 깜빡임 X)이 가능하다.
MPA
MPA(Multi Page Application)는 SPA와는 달리 새로운 페이지를 요청할 때마다 서버에서 렌더링된 정적 리소스(HTML, CSS, JS)가 다운되는 전통적인 웹페이지 구성방식이다. 페이지를 이동하거나 새로고침하면 전체 페이지를 다시 렌더링한다.
SPA, MPA과 CSR, SSR의 관계 ?
일반적으로 SPA에서의 렌더링 방식은 CSR, MPA에서 렌더링 방식은 SSR을 사용한다.
SPA는 웹 어플리케이션에 필요한 정적 리소스를 초반 한번에 모두 다운로드하고 그 이후 새로운 페이지 요청이 있을 때 페이지 갱신에 필요한 데이터만 전달받아서 클라이언트에서 페이지를 갱신하기 때문에 자연스럽게 렌더링 방식으로 CSR을 사용한다.
MPA는 새로운 요청이 있을 때마다 서버에서 이미 렌더링된 정적 리소스를 받아오기 때문에 렌더링 방식으로 SSR을 사용하게 된다.
React, Vue, Angular를 사용하여 SPA를 만들고, 특정한 방식을 가지고 렌더링 방식을 변경하지 않는다면 자연스럽게 CSR을 사용하게 되는 것이고, PHP, JSP로 MPA를 만들면 자연스럽게 SSR을 사용하게 되는 것이다!
그렇다고 SPA = CSR / MPA = SSR로 생각하면 안 된다. 주로 그렇다는 거지 페이지가 몇 개인지 렌더링을 어디서 하는지에 따라 달라지는 개념이라 주의해야 한다.
📝 CSR(Client Side Rendering)
CSR(Client Side Rendering)은 클라이언트 측에서 렌더링을 하는 방식이다.
최초에 한 번 서버에서 전체 페이지를 로딩하여 보여주고 이후에는 사용자의 요청을 받을 때마다 리소스를 서버에서 제공한 후, 클라이언트가 해석하고 렌더링을 하는 방식이다.
CSR의 장단점
장점
- js만으로 완전히 페이지를 만들 수 있으며, js를 최대한으로 활용하여 HTML, CSS를 동적으로 생성할 수 있다. (like REACT)
- 컴포넌트 단위로 코드를 나누고 다양한 디자인 패턴을 적용하는 등 클라이언트 개발의 수준을 한 단계 끌어올릴 수 있다.
- Full page load 없이 라우팅이 가능하다. (로딩X) -> js를 사용해서 동적으로 돔을 그려내기 때문에 원하는 내용만 업데이트 할 수 있다.
단점
- SEO에 취약
- HTML 파일을 하나만 받아와서 작동하다 보니 각각의 페이지에 대한 정보를 담기 힘듦
- Crawler가 서버에서 페이지 요청해서 HTML만을 읽어서 페이지에 어떤 정보가 있는지 확인하고 DB에서 정보를 꺼내준다.
- 첫 로드 시 모든 로직이 담겨있는 JS를 다운로드하다 보니 첫 진입 시 로딩 속도가 길다.
- SEO : 검색 엔진 최적화(Search Engine Optimization)
- Crawler : 웹 클로러는 조직적, 자동화된 방법으로 월드 와이드 웹을 탐색하는 컴퓨터 프로그램이다.
CSR 단점 보완
-
code splitting, tree-shaking chunk 분리를 통해 JS 번들 크기를 줄여 초기 DOM 생성 속도를 줄이면 초기 로딩 속도를 개선할 수 있다.
- 번들링 : 모듈화했던 파일들을 하나로 묶는 것 => 번들링된 JS 파일은 크기가 커서 다운받는 데 시간이 오래 걸릴 수 있다.
- Code Splitting : JS 파일을 다운받는 데 걸리는 시간 동안 화면의 기능이 작동하지 않기 때문에 하나로 번들링된 JS 파일을 페이지별로 필요한 JS 파일로 분리하는 것
-
pre-rendering을 통해 SEO 개선 가능(라이브러리나 웹팩 플러그인을 통해 HTML 파일을 미리 생성해 두고 서버에서 요청하는 자가 크롤러라면 사전에 렌더링된 HTML 버전 페이지를 보여주는 방식으로 개선 가능)
-
CSR을 사용하는 SPA에 SSR, SSG를 도입하는 것도 방법
- 프레임 워크 없이 도입
: node.js, express.js, next.js로 별도의 서버를 직접 운영하는 방법(하지만 이 방법들은 서버 환경 구성이나 빌드 등의 작업 필요 => 다룰 줄 알아야 함 => 진입장벽이 있음) - 프레임 워크로 도입하는 방법
- next.js는 React에서 SSR, SSG를 사용할 수 있도록 해주는 프레임워크로 페이지의 성격별로 SSR과 SSG 선택해서 사용하는 것도 가능
- gatsby.js는 SSG에 최적화된 React 기반 정적페이지 생성 프레임워크
- nuxt.js는 Vue를 위한 프레임워크로 next.js에 영감을 받아 만들어짐
- Angular universal은 Angular에서 SSR을 가능하게 해주는데 원래 프레임워크였지만 Angular4부터 Angular 자체에 포함되었기 때문에 더 이상 프레임워크가 아니라고 할 수 있다.
- 프레임 워크 없이 도입
📝 SSR(Server Side Rendering)
SSR(Server Side Rendering)은 서버측에서 렌더링하는 방식이다.
기존에 존재하던 방식으로 사용작가 웹페이지에 접근할 때, 서버에서 페이지에 대한 요청을 하며 서버에서는 HTML, view와 같은 리소스들을 어떻게 보여질지 해석하고 렌더링하여 사용자에게 반환한다.
SSR의 장단점
장점
- SEO에 유리함 : Crawler는 페이지를 Indexing 하기 위해 페이지에 관한 많은 정보가 필요한데, SSR을 활용하여 미리 페이지를 빌드하면 Crawler에게 많은 정보를 줄 수 있다.
- 빠른 초기 로딩 : SSR은 클라이언트에서 요청한 페이지의 HTML을 다운로드하기 때문에 CSR보다 초기 로딩이 빠르다.
- 서버에서 렌더링 후 각각의 페이지를 넘겨받는 것이므로 각각 페이지에 대한 정보를 다루기 쉽다.
단점
- 클릭 시, 새로운 HTML을 받아오기 때문에 요청마다 새로고침으로 깜빡임이 생긴다.
header나footer처럼 중복되는 내용도 다시 렌더링하여 받아야 하므로 초기 진입은 CSR보다 빨라도 페이지 이동은 SSR이 느린 편이다.- 완성된 HTML을 JS보다 먼저 받아오기 때문에 완성된 HTML로 화면은 확인 되지만 JS 다운로드가 늦어진다면 기능이 안 될 수도 있다.
📝 SSG(Static Site Generation)
SSG(Static Site Generation)는 클라이언트에서 필요한 페이지들을 사전에 미리 준비해뒀다가 요청을 받으면 이미 완성된 파일을 단순히 반환하여 브라우저에서 뷰를 보여준다.
📌 데이터 가져오는 SSG
React에서는useEffect를 통해 데이터를 가지고 온다. 그러나 Next.js에서useEffect를 사용하면 SSG로 작동하지 않는다. Next.js에서 SSG를 하려면 Next.js에서 제공하는getStaticProps나getStaticPaths를 사용한다.
⚔ SSR과 SSG의 차이
SSR은 요청 시 서버에서 즉시 HTML을 만들어서 응답하기 때문에 데이터가 달라져서 미리 만들어두기 어려운 페이지에 적합하다.
반면 SSG는 미리 만들어두고 요청 시에 해당 페이지를 응답하기 때문에 바뀔 일이 거의 없어서 캐싱해 두면 좋은 페이지에 사용된다.
즉, 서버에서 요청할 때, 즉시 만드는지 미리 만들어 놓는지의 차이가 있다.
✨ 적합한 사용
- CSR => 유저랑 상호작용이 많고 고객의 개인 정보를 기준으로 이뤄지는 서비스라면 검색엔진 노출보다 고객의 데이터를 보호하는 것이 더 중요할 수 있을 때 적합
- SSR => 상위 노출이 필요하고 누구에게나 항상 같은 내용을 보여줘야 하며 업데이트를 자주 해야 할 때 적합
- SSG => 상위 노출이 필요하고 누구에게나 항상 같은 내용을 보여줘야 하지만 업데이트를 거의 안 할 때 적합
✍ 요약
- CSR(Client Side Rendering)은 클라이언트 측에서 렌더링을 하는 방식
- SSR(Server Side Rendering)은 서버측에서 렌더링하는 방식
- SSG(Static Site Generation)는 클라이언트에서 필요한 페이지들을 사전에 미리 준비해뒀다가 요청을 받으면 이미 완성된 파일을 단순히 반환하여 브라우저에서 뷰를 보여줌
- CSR, SSR, SSG의 적절한 사용이 필요하다!
🥄 참조링크
