13장. 리액트 라우터
React는 CRS기반의 SPA
Deep Dive - SPA, MPA, CSR, SSR
SPA vs MPA
-
MPA (Multi Page Application)
- 여러개의 페이지로 변경사항이 있을 때마다 서버로 페이지를 요청
- 페이지를 이동할때마다 서버로부터 새로운 html 파일을 내려받기 때문에 새로고침 발생
-
SPA (Single Page Application)
- 하나의 페이지에서 필요한 부분만 동적으로 데이터 요청
- 새로고침이 발생하지 않아서 사용자 경험 향상
CSR vs SSR
-
CSR (Client Side Rendering)
- 서버에서 최소한의 HTML을 받고, 내부에 위치한 script 태그로 JS 파일을 받아 클라이언트에서 페이지를 렌더링하는 형식 (첫 로딩에 빈 HTML 파일에 필요한 번들파일을 모두 다운 받음)
1-1. CSR의 동작 방식
- 사용자가 웹 페이지를 방문할 경우, 브라우저는 최소한의 HTML 파일을 다운로드한다.
- 브라우저는 script 태그를 통해 JS 번들 파일을 다운로드 하고, Ajax를 통해 동적으로 컨텐츠를 가져오며 화면을 렌더링한다.
- 이후 사용자가 페이지를 이동할 경우, 별도의 HTML을 받지 않고 사전에 받은 JS 파일만을 활용하여 렌더링을 진행한다.
1-2. 장점
- 최초 로딩 이후에는 요청들에 대해서는 인터랙션이 빠르다.
1-3. 단점
- 초기에 구동에 필요한 파일을 전부 받아야 하기에, 그만큼의 초기 페이지 구동 속도가 느리다. (FP, FCP 느림)
- SEO (Search Engine Optimization), 즉 검색 엔진 최적화를 진행하기 어려움. 검색 엔진이 처음 페이지를 방문할 경우 HTML이 빈 경우가 많기 때문.
- 쿠키말고는 사용자에 대한 정보를 저장할 공간이 마땅치 않다.
-
SSR
- 서버에서 사전에 렌더링된 파일을 클라이언트에게 전송하고, 클라이언트는 이를 즉시 렌더링하는 방식
2-1. SSR의 동작 방식
- 사용자가 웹 페이지를 방문할 경우, 서버는 이를 확인하고 브라우저에게 제공할 HTML 컨텐츠를 컴파일한다.
- 컴파일된 HTML은 브라우저에 제공되며, 브라우저는 이를 다운로드하고 렌더링하여 사용자가 이를 볼 수 있도록 한다.
- 이후 JS 파일을 다운로드 받은 후 실행하여 사용자와 페이지 간의 인터렉션을 가능하게끔 한다.
- 사용자가 다른 페이지로 이동을 진행할 경우, 1~3번의 과정을 반복한다.
2-2. 장점
- 초기 페이지 로딩 속도가 빠르다. (FP, FCP가 빠르다) 서버에서 사전에 렌더링 된 HTML 파일을 브라우저에서 로딩하기 때문.
- SEO 또한 효율적으로 적용할 수 있다.
2-3. 단점
- 초기로딩속도는 빠르지만 정보가 많은 B2C 웹 서비스 등에는 서버 부담이 크다.
- 페이지를 이동할 때마다 매번 새로운 HTML을 받아야 하므로 TTFB (Time To First Byte) 가 느리다.
SPA = CSR?
- SPA와 CSR은 같은 개념이 아니다. 정확히는 SPA를 구현하기 위해 CSR 방식이 쓰이는 것이다.
- SPA vs MPA 는 애플리케이션 구동을 위해 페이지를 하나만 쓰는지, 여러 개를 쓰는지에 대한 차이다.
- CSR vs SSR 은 페이지의 렌더링이 클라이언트에서 일어나는지, 서버에서 일어나는지에 대한 차이다.
- 따라서 SPA는 첫 페이지만 서버에서 받아오고 이후의 변화는 동적으로 처리하기 위해 CSR 방식을 채택한다.
- 반대로 MPA의 경우 페이지가 달라질 때마다 서버에서 렌더링 된 리소스를 받아오기 위해 SSR 방식을 채택한다.
SPA는 CSR로, MPA는 SSR로?
- SPA는 SSR로 구현이 어렵고, MPA는 CSR로 구현이 어렵다.
- 하지만 SPA에서 첫 로딩의 경우에만 SSR을 쓰고, 이후의 요청에 대해서는 CSR 방식을 쓸 수 있다. (Next.js)