SPA
Single Page Application 의 약어이다. 단일 페이지로 구성된 어플리케이션이다.
SPA === CSR 공식은 틀렸다.
페이지에 처음 진입시에 모든 데이터를 다운로드 한다. 페이지의 특정 부분이 바뀐다고 해서
모든 것을 다시 로드하는게 아니라 필요한 부분만 서버로부터 받아서 화면을 업데이트 한다.
필요한 부분만 갱신하기 때문에 네이티브 앱에 가까운 자연스러운 페이지 이동과 사용자
경험을 제공한다.

한번에 받기때문에 초기 진입하는 속도가 느리다. (webpack 의 code splitting 이 있다고
하지만 완벽한 해결책이 되지는..)
검색 엔진 최적화가 어렵다. (SSR 로 해결..!)

MAP
Multi Page Application 의 약어이다. 주로 SSR 을 사용한다.
페이지의 다른 링크를 클릭할 때마다 새롭게 HTML 을 서버에 요청하고, 매번 그 결과물을 받아야한다

https://d2.naver.com/helloworld/7804182

SSR은 무엇인가?
SSR은 서버에서 사용자에게 보여줄 페이지를 모두 구성하여 사용자에게 페이지를 보여주는 방식이다.
JSP/Servlet의 아키텍처에서 이 방식을 사용했다.

서버를 이용해서 페이지를 구성하기 때문에 클라이언트에서 구성하는 CSR(client-side rendering)보다 
페이지를 구성하는 속도는 늦어지지만 전체적으로 사용자에게 보여주는 콘텐츠 구성이 완료되는 시점은
 빨라진다는 장점이 있다. 더불어 SEO(search engine optimization) 또한 쉽게 구성할 수 있다.

반면 CSR은 SSR보다 초기 전송되는 페이지의 속도는 빠르지만 서비스에서 필요한 데이터를 클라이언트
(브라우저)에서 추가로 요청하여 재구성해야 하기 때문에 전제적인 페이지 완료 시점은 SSR보다 느려진다.

SSR을 사용하면 프런트엔드 영역과 백엔드 영역은 REST API를 통해 느슨하게 연결할 수 있다.

React 기반의 SSR 환경을 만들 때 가장 간단한 방법은 **Next.js**를 이용해 SSR을 구성하는 것이다. 
Next.js는 SSR을 구성하기에 훌륭한 프레임워크이다. React 공식 가이드에서도 명시되어 있다.

SSR
사용자 입장에서 초기 진입 시 속도가 빠르게 느껴진다. 서버에서 view 를 모두 렌더한 채로 전달 되기 때문이다.
그러나 js 를 다운받고, 적용하는 시간까지가 추가로 있어야 하기 때문에 인터렉션 되기까지는
좀 더 시간이 필요하다.

또한 인터렉션으로 사용자의 요청이 발생 시에는 새로운 html 을 서버에 요청한다. 그러니까 매번
새로운 html 을 서버에 요청하다보니 반응속도가 느려지고 전체적인 리렌더링이 일어나는 것이다.

클라이언트 요청 -> html 리소스 서버에 전달 -> 서버 처리 -> html 클라에 전달 -> 클라이언트 표시

CSR
클라이언트 쪽에서 view를 그리기 때문에 상대적으로 느리게 느껴질 수 있다.
하지만 모두 그려진 후에는 즉각적으로 인터렉션이 가능하다. 서버에 HTML 을 요청하고 받고, js까지
다운 받아야 한번에 보여지고, 인터렉션 되는 것이기 때문이다.

또한 인터렉션으로 사용자의 요청이 발생 시에는 SSR 과 달리 일부 필요한 리로스만 주고 받으면서
동적으로 페이지를 불러오는 것이다.

SEO
웹 크롤러, 봇들은 js를 실행시키지 못하고 HTML 에서만 컨텐츠를 수집하기 때문에 CSR 방식의
페이지는 SEO 하기에 좋지 않은 점이 있다.
SSR 방식의 페이지는 view를 서버에서 전부 렌더링하여 내려주므로 HTML에 모든 컨텐츠가 저장되어
있기 때문에 SEO 적용에 큰 문제가 없다.