1. 렌더링 삼총사

1) CSR (Client Side Rendering)

랜더링 과정을 살펴보면 서버에서 빈 껍데기인 HTML을 보낸 후 클라이언트에서 동적으로 태그들과 스타일을 생성하여 페이지를 채운다. 이러한 방식을 Single Page Applications(SPAs)라고 부른다.
즉, 최초에 Single Page만 서버로부터 불러와 렌더링하고 이후 모든 것을 클라이언트 사이드에서 렌더링하는 어플리케이션이다.
이러한 렌더링 방식은 SEO 문제가 있다. 구글, 네이버 등의 검색봇이 웹 사이트의 HTML을 읽어들이고 인덱싱하여 검색 엔진이 해당 페이지를 찾아낼 수 있도록 하는데, 클라이언트 사이드 렌더링 방식으로 만들어진 웹사이트는 빈 HTML만 렌더링하기 때문에 검색봇들이 컨텐츠를 읽어들일 수 없다.

이러한 문제로 인해 서버 사이드 렌더링을 사용하게 되었다.

2) SSR (Server Side Rendering)

서버 사이드 렌더링은 마크업 생성을 클라이언트 디바이스에서 하는 것이 아니라, 서버에서 한다.
브라우저가 서버에 페이지를 요청하면, 서버가 필요한 데이터로 HTML을 구성하여 브라우저에 전송하고 브라우저에서 응답으로 받은 HTML을 그대로 렌더링한다.

이 방식은 클라이언트 사이드 렌더링보다 더 빠르고 SEO 문제를 해결해준다.
그러나, 서버에서 매번 동적으로 계산하여 페이지를 렌더링하기 때문에 서버 부하가 생겨날 수 있으며 서버 비용도 많이 든다. 또한 서버로부터 매번 페이지를 새로 전달받기 때문에 서버에서 페이지를 생성하는 시간이 소요된다.

이러한 문제로 인해 유저의 데이터에 따라 다르게 보여주는 페이지는 동적으로, 항상 같은 내용을 보여주는 페이지는 정적으로 보여주기 위해 SSG가 등장했다.

3) SSG (Static Site Generation)

회사 소개 페이지 등 모든 유저에게 항상 동일한 화면이 보이는 페이지는 한번만 생성한 후 어딘가에 저장해두고 필요할 때마다 로드해도 된다.
정적 페이지는 한번만 생성하고 나머지 페이지들은 동적으로 서버 사이드 렌더링하는 방식을 SSG라고 한다.

AWS에서 배포할 때 봤던 것처럼 CloundFront에서 정적, 동적 페이지를 나눌 수 있다.

2. SPA vs MPA

1) SPA (Single Page Application)

SPA는 한 개의 페이지로 구성된 Application이다.
웹 어플리케이션에 필요한 모든 정적 리소스를 최초 한 번만 다운로드 받으며, 그 후 새로운 페이지 요청이 있을 때 페이지 갱신에 필요한 데이터만 전달 받아 페이지를 갱신한다.
따라서 SPA를 CSR 방식으로 렌더링한다고 말한다.
단, SPA 방식이 모두 CSR인 것은 아니며 SPA를 SSR 방식으로 렌더링할 수도 있다.

2) MPA (Multiple Page Application)

MPA는 여러 개의 페이지로 구성된 Application이다.
새로운 페이지를 요청할 때마다 정적 리소스가 다운로드된다.
페이지가 이동되거나 새로고침하면 전체 페이지를 다시 렌더링한다.
SEO관점에서 유리하고 첫 로딩이 매우 짧다는 장점이 있으나, 새로운 페이지를 요청할 때마다 전체 페이지를 다시 렌더링한다는 점, 페이지 이동 시 불필요한 템플릿도 중복해서 로딩한다는 점 등의 단점도 있다.

< 참조 : https://im-developer.tistory.com/227 >