SPA : Single Page Application
SPA : 하나의 페이지로 구성된 웹 어플리케이션.
웹 어플리케이션을 필요한 정적 리소스를 초반 한번에 모두 다운로드 하고
그 이후 새로운페이지 요청이 있을 때 페이지 렌더에 필요한 데이터만 전달
받아서 클라이언트에서 페이지를 갱신하기 때문에 렌더링 방식으로 CSR을 사용.
어플리케이션을 이용할 때 카테고리는 고정되어있고 메인화면 부분만 바뀌는 부분의 웹사이트를 SPA라고 칭함.
MPA :Multi Page Application
MPA : 탭을 이동할 때 마다 서버로부터 새로운 html을 새로 받아와서 페이지 전체를 렌더링 하는 전통적인 웹페이지 방식이다.
새로운 요청이 있을 때마다 서버에서 이미 렌더링된 정적 리소스를 바동기 때문에 렌더링 방식으로 SSR을 사용하게 된다.
AJAX가 등장하면서부터는 원하는 부분만 클라이언트에서 동적으로 바뀔 수 있고 화면 깜빡임도 없는 SPA를 사용하게 되었다.
SPA !==CSR MPA !==SSR
렌더링 방식을 변경하지 않는다면 자연스럽게 SPA는 SCR 방식을,
MPA는 SSR 방식을 사용하게 된다.
특별한 목적을 가지고 렌더링 방식을 변경하지 않는다면 자연스럽게 각각의 렌더링 방식을 사용
위에 두 개념은 페이지가 몇 개인가? 렌더링을 어디서 하는가? 에 따라 달라지는 다른개념이라는 것을 기억해야한다 !
CSR :Client Side Rendering
말 그대로 SSR과 달리 렌더링이 클라이언트 쪽에서 일어난다.
즉, 서버는 요청을 받으면 클라이언트에 빈 뼈대 HTML과 연결된 동적 JS를 보내준다.
React나 vue 는 먼저 페이지를 하나 받고 데이터 없이 화면만 먼저 받고, 데이터는 로딩창 돌아가는 와중에 백엔드 서버에서 데이터를 직접 받음.
클라이언트는 그것을 받아 렌더링을 시작한다.
- 초기 로딩속도가 느리다. 이후 구동 속도는 빠름.
- 서버가 빈 뼈대 HTML을 넘겨주는 역할을 수행하기 때문에 서버측에 부하가 적다.
- 클라이언트 측에서 연산,라우팅 등을 모두 직접 처리하기 때문에 반응속도가 빠르고 UX도 우수하다
- 리엑트 방식이 더 오래걸릴수 있음. 모든 화면을 다 가져와야 하기 때문에, 데이터까지 받아오는 시간은 더 걸릴수 잇는데 화면에 보이는 시간이 단축되어서 쓴다.
- 사용자가 빠르게 인터렉션이 필요할 때 사용한다.
- 검색엔진이 로딩창 밖에 없다고 순위가 떨어질수 있음. 구글은 똑똑해서 기다림, 하지만 국내 뭐 사이트는 리액트 방문하면 미완성인줄 알고 나가버림.
CSR 순서.
브라우저 ⇒ 백엔드 서버 ⇒ 데이터베이스⇒ 백엔드 서버 ⇒ 브라우저
SSR : Server Side Rendering
말 그대로 서버쪽에서 렌더링 준비를 끝마친 상태로 클라이언트에 전달하는 방식이다.
SSR은 요청시 서버에서 즉시 HTML을 만들어서 응답하기 때문에 데이터가 달라지거나 자주 바뀌어서 미리 만들어두기 어려운 페이지에 적합.
브라우저에서 페이지 요청을 보내면 프론트 서버에서 백엔드 서버로 데이터를 요청, 프론트 서버는 html과 데이터를 합쳐서 브라우저로 보내줌.
이어, 브라우저가 html을 렌더하고, JS 코드를 다운로드하고 ,html에 JS 로직을 연결한다.
모든 데이터가 이미 HTML에 전달되어진 상태이기 때문에 SEO에 유리함.
초기 구동속도가 빠르다.
단점:
- 사용자가 버튼을 클릭하거나 이동하려해도 아무런 반응이없다.
JS가 연결되기 전까지 사용자 입력에 응답 할 수 없기 때문이다. - 화면 깜빡임이 있다
- 페이지마다 요청을 보내기 때문에 서버 부하가 있다.
SSR 순서.
브라우저 ⇒ 프론트 서버 ⇒ 백엔드 서버 ⇒ 데이터베이스 ⇒ 백엔드 서버⇒ 프론트엔드 서버 ⇒ 브라우저
SSG : Static Site Generation(Static Rendering)
서버에서 HTML을 보내준다는 측면에서는 SSR과 비슷하지만 언제 만들어 주느냐에 따라 차이가 있다.
SSG는 페이지들을 서버에 모두 만들어둔 후에 요청시에 해당 페이지를 응답하는 것이기 때문에 바뀔 일이 없다.
