CSR과 SSR의 개념과 차이점 (feat. SPA, MPA)

CSR과 SSR의 개념과 차이점을 알아보기 전 SPA와 MPA의 개념과 차이점에 대해 먼저 알아보도록 하겠습니다.

 

SPA(Single Page Application)

 

개념

• 한 개(Single)의 Page로 구성된 Application
• CSR(Client Side Rendering) 방식으로 렌더링
• 서버로부터 완전한 새로운 페이지를 불러오지 않고 현재의 페이지를 동적으로 다시 작성함으로써 사용자와 소통하는 웹 애플리케이션 또는 웹 사이트
• Angular, React, Vue 등 프레임워크로 만든 홈페이지들이 대부분 SPA에 해당

 

작동 방식

• SPA는 웹 애플리케이션에 필요한 모든 정적 리소스(HTML, CSS, JavaScript)를 단 한 번만 로딩
• 이후 추가적인 요청 시 페이지 갱신에 필요한 API를 JSON으로 전달받아 페이지를 갱신 (동적 페이지 구성)

 

MPA(Multiple Page Application)

 

개념

• 여러 개(Multiple)의 Page로 구성된 Application
• SSR(Server Side Rendering) 방식으로 렌더링

 

작동 방식

• 새로운 페이지 요청 시 마다 서버에서 렌더링 된 정적 리소스(HTML, CSS, JavaScript) 렌더링
• 페이지 이동, 새로고침을 할 경우 전체 페이지를 다시 렌더링

 

---

 

CSR(Client Side Rendering)

 

작동 방식

1. 클라이언트에서 사용자가 웹사이트를 요청합니다. 이때 클라이언트는 브라우저를 의미합니다.
2. CDN을 통해 HTML 파일과 Javascript로 접근할 수 있는 링크를 클라이언트로 전송합니다.
   * CDN? Content Delivery Network의 약자로 콘텐츠 전송 네트워크를 뜻합니다.
3. 클라이언트는 HTML과 JavaScript를 다운로드 받습니다. HTML이 먼저 로드되고 Javascript 파일은 비 동기적으로 다운로드될 수 있으며, 아직 사용자는 확인할 수 없는 단계입니다.
4. 클라이언트가 Javascript를 다운로드 받습니다.
5. 다운로드가 완료된 Javascript가 실행되며 데이터를 위한 API가 호출됩니다. 사용자가 초기 렌더링화면을 보는 단계입니다.
6. 서버가 API로부터 요청에 응답합니다.
7. API로부터 받아온 데이터가 초기렌더링자리에 렌더링 됩니다. 사용자가 페이지에서 상호작용이 가능해집니다.

사용자의 추가 요청 시 클라이언트에서 서버로 API를 호출하고 전송된 API기반으로 클라이언트에서 필요한 데이터를 렌더링 합니다.

앞서 설명한 SPA의 라이프사이클이 적용되어 서버로부터 완전한 새로운 페이지를 불러오지 않고 현재의 페이지를 동적으로 다시 작성함으로써 사용자 편의적인 UX를 제공합니다.

 

장점

• 페이지 전환(새로고침) 없이도 원활한 사용자 경험 (UX)를 제공합니다.
• 초기렌더링 이후 페이지의 반응성이 향상됩니다.
• 필요데이터를 받아 페이지를 동적으로 작성함으로써 트래픽이 감소합니다.

 

단점

• SEO 최적화에 보완이 필요합니다.
  * SEO? 검색 엔진 최적화를 뜻합니다.
• 클라이언트 측에서 데이터와 UI를 처리하기 때문에 초기 로드시간이 느립니다.

 

SSR(Server Side Rendering)

작동 방식

1. 클라이언트에서 사용자가 웹사이트를 요청합니다.
2. 서버는 요청에 대해 즉시 렌더링 된 HTML파일을 생성합니다.
3. 클라이언트에 전달한 뒤, 즉시 HTML파일을 렌더링 합니다. 사용자가 렌더링완료된 화면을 확인가능하나 상호작용이 불가능한 단계입니다.
4. 클라이언트가 Javascript를 다운로드 받습니다.
5. 다운로드 받는 사이 사용자는 콘텐츠는 확인할 수 있지만 사이트를 조작할 수 없는데, 이때의 사용자 조작을 기록합니다.
6. 클라이언트가 Javascript 프레임워크를 실행합니다.
7. Javascript까지 성공적으로 컴파일되어 기록한 사용자 조작이 실행되고 사용자와 상호작용이 가능해집니다.

 

장점

• 서버 측에서 데이터와 UI를 처리하기 때문에 초기 로드시간이 빠르며 네트워크가 느린 환경에서도 이 점으로 인해 사용자에게 더 나은 경험을 제공합니다.
• 검색 엔진 크롤러가 서버에서 제공하는 완성된 HTML을 크롤링할 수 있어 SEO에 최적화되어 있습니다.

 

단점

• 서버가 모든 요청에 대해 HTML을 렌더링 하여 서버 부하가 증가됩니다.
• 페이지 전환 시 서버의 요청이 필요해 다시 한번 모든 HTML파일이 구성되고 화면이 깜빡임(새로고침)이 있습니다.

 

CSR과 SSR의 차이점

렌더링(Rendering)

• CSR
  • 브라우저에서 렌더링 되고 서버로부터 HTML, CSS, Javascript를 다운로드 후 Javascript가 실행되어 페이지가 렌더링 됩니다. 초기 로딩 속도가 느릴 수 있으나, 이후 페이지 전환이 빠릅니다.
• SSR
  • 서버에서 이미 렌더링 된 HTML을 클라이언트에 전달하여 초기 페이지 로딩이 빠르지만, 이후 페이지 전환 시 서버 요청이 필요합니다.

 

SEO(검색 엔진 최적화)

• CSR
  • Javascript가 실행된 후 페이지가 동적으로 로드되어 검색 엔진이 콘텐츠를 원활하게 크롤링하는 데에 어려움이 있습니다.
• SSR
  • 서버에서 완성된 HTML을 제공하여 검색 엔진 크롤러가 HTML을 쉽게 인덱싱할 수 있습니다.

 

사용자 경험 (UX)

• CSR
  • 페이지 전환이 빠르고 클라이언트에서 데이터 요청과 UI 업데이트를 빠르게 처리하여 원활한 사용자 경험을 제공합니다.
• SSR
  • 초기 로딩 속도가 빠르고 페이지를 처음 로드할 때 사용자에게 즉시 콘텐츠가 제공되나 페이지 전환 시 서버 요청이 필요해 지연이 발생할 수 있습니다.