[Vue.js][intro] 3. SPA (Single Page Application), CSR (Client-side Rendering)

 

▶ SPA (Single Page Application)

페이지가 1개인 어플 페이지 1개를 두고, 지우고 그리고 지우고 그리고의 과정을 반복하는 것

처음에 하나의 HTML 파일로 시작한다.  그 이후로는 서버가 페이지를 주지 않고, 필요한 부분만 업데이트 한다.  (사용자와 상호작용 할때마다 페이지 전체를 새로 로드하지 않고, 화면에 필요한 부분만 동적으로 갱신한다) 대부분 클라이언트 측에서 UI와 렌더링을 관리한다 (JavaScript 프레임워크를 사용해서) => CSR 방식 사용

 

---

▶ CSR (Client-side Rendering)

클라이언트에서 화면을 렌더링하는 방식

예전에는 장고의 template에서 모든 부분을 다 그린 다음에 응답을 줬다. (서버가 그린 것) 클라이언트 측은 그냥 완성된 페이지를 받았을 뿐이다.  그런데 이제는  클라이언트에서 그림을 그린다.  서버로부터 재료만 받고, 그림은 클라이언트에서 그리는 것

* 랜더링 : 만들고 그리는 것

 

▶ CSR (Client-side Rendering) 동작과정

1. 브라우저는 서버로부터 최소한의 HTML 페이지와 해당 페이지에 필요한 JavaScipt 응답을 받는다  2. 그런 다음 클라이언트 측에서 JavaScript를 사용하여 DOM을 업데이트하고  페이지를 렌더링한다.  3. 이후 서버는 더 이상 HTML을 제공하지 않고,  요청에 필요한 데이터에만 응답한다  => Google Maps, Facebook, Instagram등의 서비스에서 페이지를 갱신할 때  새로고침을 하지 않아도 되는 이유이다.

 

CSR 장점	CSR 단점
1. 빠른 페이지 전환  페이지가 처음 로드된 후에는, 필요한 데이터만 가져오면 되고 JavaScript는 전체 페이지를 새로 고칠 필요 없이  페이지의 일부를 다시 렌더링 할 수 있기 때문이다.  서버로 전송되는 데이터의 양을 최소화한다  (서버 부하 방지) 2. 사용자 경험 새로고침이 발생하지 않아,  네이티브 앱과 유사한 사용자 경험을 제공한다  3. Frontend와 Backend의 명확한 분리  Frontend는 UI 렌드링 및 사용자 상호 작용 처리를 담당한다  Backend는 데이터 및 API 제공을 담당한다  대규모 어플을 더 쉽게 개발하고 유지, 관리가 가능하다	1. 느린 초기 로드 속도  전체 페이지를 보기 전에 약간의 지연을 느낄 수 있다 JavaScript  다운로드, 구문 분석, 실행이 다 될때까지 페이지가 완전히 렌더링되지 않기 떄문이다.  2. SEO(검색 엔진 최적화) 문제 페이지를 나중에 그려가는 것이기 때문에  검색에 잘 노출되지 않을 수 있다.  검색엔진 입장에서는 HTML을 읽어와서 분석해야하는데, 아직 콘텐츠가 모두 존재하지 않기 때문이다.

---

SPA vs .MPA

CSR vs .SSR

Multi Page Application (MPA)	Server-side Rendering (SSR)
여러 개의 HTML 파일이 각각 서버로부터 로드된다  사용자가 다른 페이지로 이동할 때마다  새로운 HTML 파일이 로드된다	서버에서 화면을 렌더링하는 방식 모든 데이터가 담긴 HTML을 서버에서 완성한 후  클라이언트에게 전달한다