목차
SPA란
-
Single Page Application의 약자로서
하나의 페이지로 구성된 웹 어플리케이션입니다. -
처음에 웹 어플리케이션에 필요한 정적리소스 전체를
처음 한번 렌더링 한 뒤, 필요한 데이터만 Ajax요청을 통해 특정 부분만 바꾸는 방식입니다. -
일반적으로
CSR방식을 사용하며, 대표적으로 React, Vue, Angular 등이 있습니다.
MPA란
-
Multi Page application의 약자로서
여러 페이지로 구성된 웹 어플리케이션 입니다. -
텝을 이동할 때 마다 서버로부터 새로 페이지를 받아와서 렌더링 하는 전통적인 방식입니다.
-
일반적으로 SSR방식을 사용하며, 대표적으로 PHP, JSP등이 있습니다.
CSR이란
-
Client Side Rendering의 약자로서
클라이언트 측에서 렌더링 하는 방식입니다. -
CSR 동작과정
⇒ 사용자가 웹사이트 방문
⇒ 클라이언트(브라우저)에서 콘텐츠 요청
⇒ 서버측에서 빈 뼈대 HTML, 연결된 JS링크를 응답하여 보냄
⇒클라이언트(브라우저) 측에서 JS를 다운받아서 이를 통해 동적 DOM 생성 후 렌더링
CSR방식의 장점
-
초기 로딩 이후 페이지 일부를 변경할 때는 서버에 요청해서 특정 부분만 바꾸면 되기 때문에 이후 구동 속도가 빠릅니다.
-
화면 깜빡임이 없습니다.
-
서버가 빈 뼈대의 HTML을 보내주기 때문에 서버의 부하가 줄어듭니다.
-
클라이언트에서 라우팅, 연산을 처리하기 때문에 반응속도가 빠르고 UX도 우수합니다.
-
사용자가 보는 시점과 사용자가 JS 기능 즉 인터렉티브한 기능들을 사용하는 시점이 동일합니다. (TTV === TTI)
TTV: Time To View의 약자로서사용자가 웹브라우저에서 내용을 볼 수 있는 시점TTI: Time To Interact의 약자로서사용자가 웹브라우저에서 인터랙션 할 수 있는 시점
CSR방식의 단점
-
JS를 다운받아서 동적으로 DOM을 생성 후 렌더링 하기 때문에 초기 로딩속도가 느립니다.
-
SEO 즉 검색엔진최적화에 좋지 않습니다
왜 why?⇒ 서버측에서 빈 뼈대만 있는 HTML을 전송하는데 이때 웹 크롤러가 빈 HTML(최소한의 HTML파일)을 읽기 때문에 SSR에 비해 검색엔진 최적화에 좋지 않습니다.
크롤러 : 검색 엔진은 자동화된 로봇
SSR이란
-
Server Side Rendering의 약자로서
서버 측에서 렌더링 하는 방식입니다. -
서버측에서 만들어서 보내는 방식은 SSR, SSG 두가지 방식이 있습니다.
SSG란? ⇒ Static Site Generation의 약자로서 서버에서 요청시에 즉시 만드는 것입니다.
SSG 와 SSR의 차이 ⇒ 서버에서 요청시에 즉시 만드느냐?(SSR) 미리 다 만들어 놓느냐?(SSG)
SSG는 미리 만들어두니까 바뀔 일이 거의 없는 페이지에 적합 (캐싱해두기 좋은 페이지) 하며, SSR은 요청시 서버에서 만들어서 보내기 때문에 데이터가 달라져서 미리 만들어두기 어려운 페이지에 적합합니다.
- SSR 동작과정
⇒ 사용자가 웹사이트 방문
⇒ 서버에 콘텐츠 요청
⇒서버에서 데이터들을 통해 HTML, CSS을 만들어브라우저에 응답으로 보냄
⇒ 브라우저는 서버로부터 받은 HTML을 렌더링, JS code를 다운로드 하여 HTML에 JS를 연결
SSR방식의 장점
-
서버에서 렌더링 준비를 마친 HTML을 브라우저에게 전달해주기 때문에 검색엔진 최적화에 유리합니다.
-
JS를 다운로드 받기 전에도 사용자가 렌더링 페이지를 볼 수 있기 때문에(서버측에서 렌더링 준비를 마친 HTML을 전달하기 때문) 초기 구동속도가 빠릅니다.
SSR방식의 단점
-
JS를 다운받기전 사용자가 렌더링 페이지를 볼 수 있으나, JS 다운로드 전이기에 작동하지 않을 수 있다는 단점이 있습니다. ⇒ 사용자 : 렉걸렸나?
-
화면 깜빡임이 있습니다.
-
TTV ≠=TTI. Time to view, Time to interacitve 간의 시간차이가 발생합니다.
-
서버측에 부하가 있습니다.
결론
-
CSR, SSR의 각각의 장단점이 존재하기 때문에 서비스 성격에 따라 다르게 적재적소에 맞게 사용해야 합니다.
-
CSR을 사용하면 좋은 예
- 만약 유저와 상호작용이 많고, 검색 엔진에 노출되는 부분이 크게 필요로 하지 않는경우
- 네트워크가 빠를 때 (CSR은 한번에 모든 것을 불러오기 때문)
- 서버의 성능이 좋지 않을 때
-
SSR을 사용하면 좋은 예
-
누구에게나 동일한 페이지, 노출검색을 많이 필요로 하는 페이지인 경우
-
만약 자주 바뀌지 않는 페이지인 경우 SSG, 자주 바뀌지 않는 페이지라면 SSR을 사용하면 좋습니다.
-
네트워크가 느릴 때
왜 why? SSR은 각 페이지마다 나눠 불러오기 때문입니다. -
최초 로딩이 빨라야하는 사이트를 개발 할 때
Ref
