CPA(Single Page Application)와 CSR(Client Side Rendering)

 

Client-side framework

클라이언트 측에서 UI와 상호작용을 개발하기 위해 사용되는 JavaScript 기반 프레임워크

 

필요한 이유? 🤷‍♀️

웹에서 하는 일이 많아짐

• 웹에서 단순히 문서를 읽는 것만이 아닌 무언가(음악 스트리밍, 채팅 등)를 하게 되었다.
• 현대적이고 복잡한 대화형 웹 사이트 -> 웹 애플리케이션(web application)
• Client-side framework를 통해 동적인 대화형 애플리케이션을 쉽게 구축할 수 있다.

다루는 데이터가 많아짐

• 애플리케이션의 기본 데이터를 안정적으로 추적하고 업데이트(렌더링, 추가, 삭제 등)가 필요하다.
• 애플리케이션의 상태를 변경할 때마다 일치하도록 UI를 업데이트해야 한다.

 

SPA (Single Page Application)

페이지 한 개로 구성된 웹 애플리케이션

-> 웹 애플리케이션의 초기 로딩 후 새로운 페이지 요청 없이 동적으로 화면을 갱신하며 사용자와 상호작용하는 웹 애플리케이션

동작 과정

1. 서버로부터 필요한 모든 정적 HTML을 처음에 한 번 가져온다.
2. 브라우저가 페이지를 로드하면 Vue 프레임워크는 각 HTML 요소에 적절한 JavaScript 코드를 실행한다. (이벤트 응답, 데이터 요청 후 UI 업데이트 등)

https://msdn.microsoft.com/en-us/magazine/dn463786.aspx

 

CSR (Client Side Rendering)

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

동작 방식

1. 브라우저는 페이지에 필요한 최소한의 HTML 페이지와 JavaScript를 다운로드한다.
2. JavaScript를 사용하여 DOM을 업데이트하고 페이지를 렌더링한다.

 

CSR 장점

1. 속도가 빠름

• 페이지의 일부를 다시 렌더링할 수 있으므로 동일한 웹 사이트에서 다른 페이지로의 이동 속도가 빠르다.
• 서버로 전송되는 데이터의 양을 최소화한다.

2. Lazy Loading 지원

• 페이지 내에서 바로 필요하지 않은 데이터는 로딩 시점을 미루고 필요할 때 로드하는 전략이다.

3. 좋은 사용자 경험 제공

• 새로고침이 발생하지 않아 네이티브 앱과 유사한 사용자 경험을 제공한다.

4. 프론트엔드와 백엔드의 명확한 분리

• 프론트엔드는 UI 렌더링 및 사용자 상호 작용 처리를 담당하고, 백엔드는 데이터 및 API 제공을 담당한다.
• 대규모 애플리케이션을 더 쉽게 개발하고 유지 관리할 수 있다.

 

CSR 단점

1. 초기 구동속도 느림

• JavaScript가 다운로드, 구문 분석 및 실행될 때까지 페이지가 완전히 렌더링되지 않아 전체 페이지를 보기 전에 약간의 지연을 느낄 수 있다.

2. SEO(검색 엔진 최적화) 문제

• 페이지를 나중에 그려 나가는 것이기 때문에 검색에 잘 노출되지 않는 문제가 있을 수 있다.