Front-End/React

SSR, CSR 차이 + SPA, MPA

g_three 2023. 2. 15. 00:26

SSR (Server Side Rendering)

서버 사이드 랜더링은 서버로부터 완전하게 만들어진 html을 받아와 페이지를 렌더링하는 방식.

 

CSR과의 차이점으로는 초기 로딩속도가 빠르지만, 새로운 요청이 있을때마다 페이지 전체를 다시 구성해야하는 단점이 있다.

 

장점으로는 SEO 검색엔진 최적화에 유리하다. 검색엔진이 웹을 크롤리하면서 페이지의 컨텐츠 색인을 생성하는 과정에서 유리하다.

 

(SPA - Single Page Application -> 인터랙션이 발생할때마다 서버로부터 새로운 파일을 받아 해당 링크로 이동하여 페이지 전체를 새로 랜더링하는 웹페이지 구성방식 )

 

 

왜 SEO 검색엔진 최적화에 유리할까?

SSR은 서버에서 초기 페이지 로딩시 페이지의 내용을 렌더링 한 후 클라이언트에게 전달하기 때문에 검색엔진은 페이지의 실제 컨텐츠들을 바로 수집할 수 있다. 

But, CSR의 경우에는 초기 로딩시 페이지가 비어있거나 미리 렌더링되 내용을 찾을 수 없어 검색엔진이 페이지 내용을 인식하지 못하게 된다. 

 

 

 

CSR (Client Side Rendering)

초기 페이지에서 로딩시 빈 페이지나 최소한의 내용만을 로드하고, Client에서 JavaScript를 사용하여 페이지의 나머지 내용을 동적으로 랜더링하는 방식이다. 이로인해 빠른 페이지 전환과 사용자 경험을 제공할 수 있다. 그러나 검색엔진 최적화에는 제약이 따르게 된다.

 

 

CSR 작동 순서

  1. 클라이언트 측에서 초기화면을 로드하기 위해 서버에 요청을 보냄.
  2. 서버는 화면에 필요한 리소스를 응답.
  3. 하지만 SSR과의 차이점으로 모든 js 파일을 우선적으로 다 받기 때문에 초기 로딩시간이 김.

 

요약

  SSR (Server-Side Rendering) CSR (Client-Side Rendering)
장점 초기 로딩 속도 개선 빠른 페이지 전환 및 상호작용
  검색 엔진 최적화 가능 풍부한 사용자 경험
  SEO에 유리 서버 부하 감소 (클라이언트 측)
  초기 페이지 컨텐츠 표시  
단점 서버 부하 발생 초기 로딩 속도 저하
  초기 응답 시간 지연 SEO에 취약
  복잡한 서버/클라이언트 코드 관리 검색 엔진 최적화 어려움
  클라이언트 측 상호작용 미흡  

 

 

SPA (Single Page Application)

SPA란 CSR에서 사용되는 기술로, 페이지 전환시 서버로 부터 새로운 페이지를 요청하지 않고 , 클라이언트 측에서 JavaScript를 사용하여 필요한 컨텐츠를 동적으로 로드하고 렌더링하는 방식이다. 

 

SPA 특징 

1. 페이지의 내용을 동적으로 클라이언트 측에서 JavaScript를 사용하여 렌더링한다.

2. 페이지 간 전환은 브라우저의 URL 변경을 통해 관리되며, 클라이언트 측에서 라우팅이 처리된다. (ex. react-router-dom)

3. 빠른 페이지 전환

 

 

MPA (Multi-Page Application)

다중 페이지 응용 프로그램을 의미하며, SPA와 비교되는 개념이다. MPA는 웹 애플리케이션을 구성하는 한가지 주요 아키텍처 방식 중 하나로 다음과 같은 특징이 있다. 

 

MPA 특징

  1. 다중 페이지 구조: MPA는 여러 개의 HTML 페이지로 구성되며, 각 페이지는 주로 웹 애플리케이션 내의 서로 다른 섹션이나 기능을 나타낸다. 예를 들어, 홈페이지, 로그인 페이지, 사용자 프로필 페이지, 제품 목록 페이지 등이 다른 HTML 페이지로 구성될 수 있다.
  2. 페이지 간의 전환: 사용자는 각 페이지 간을 이동할 때 웹 브라우저에서 새로운 페이지를 로드하게 되며, 이로 인해 전체 페이지가 새로 고쳐진다. 이러한 페이지 간의 전환은 일반적으로 하이퍼링크를 클릭하거나 메뉴 항목을 선택함으로써 이루어진다.
  3. 서버 측 렌더링: MPA에서는 각 HTML 페이지를 서버에서 동적으로 생성하고 렌더링하는 경우가 많다. 이는 서버 측에서 데이터베이스 조회 및 처리를 수행하고, 그 결과를 클라이언트에게 HTML로 반환하는 방식이다.

 

MPA는 과거에 주로 사용되었고 최근에는 SPA나 React, Angular, Vue.js 등 프레임워크를 주로 사용한다. 

 

SPA는 페이지간 전환을 최소화하고 더 빠른 성능 및 더 부드러운 사용자 경험을 제공하는데 중점을 둔다.