[React] SPA(Single Page Application)란? (+CSR/SSR)

1. SPA(Single Page Application)

 

SPA는 단일 페이지 어플리케이션으로 서버에서 필요한 데이터만 비동기로 받아와서 동적으로 현재 화면에 다시 렌더링하는 방식을 의미한다. CSR(Cliend-Side Rendering)으로 동작한다.

 

어플리케이션과 상호작용할 때마다 서버에 요청해 전체 HTML을 받아오는 방식이 아닌, 화면 렌더링을 로컬 PC에서 생성해 빠른 화면 전환 가능

 

전체 웹페이지를 다시 표시하는 대신에 특정 부분만 동적으로 업데이트하는 것!

사용자 경험을 향상시킬 수 있다.

 

• 최초 한번 방문으로 전체 웹 어플리케이션용 파일이 다운로드. 이후 웹서버에선 화면구성을 위한 HTML이나 CSS 전송X (한번에 필요한 데이터를 전송받고, 필요한 부분만 업데이트함)

 

페이지간 이동시 필요한 데이터만을 JSON으로 전달받아 페이지를 갱신해 네이티브 앱과 유사한 사용자 경험 제공 가능

 

장점

• 페이지 이동속도가 빠르다
• 서버 부담이 감소

 

단점

• 초기 구동속도가 느린편(필요한 모든 정적 리소스 최초에 한번에 다운하기 때문)
• SEO (검색엔진 최적화) 문제
  서버렌더링 방식이 아닌 자바스크립트 기반 비동기모델(클라이언트 렌더링 방식)이기 때문에 처음 받은 웹페이지의 소스코드가 거의 비어있어 검색이 잘 안 될수도 있다.

 

2. MPA(Multi Page Application)

 

MPA는 전통적인 웹 페이지를 표현하는 방식으로 SSR(Server-Side Rendering)으로 동작

 

장점

• 첫 로딩 속도가 빠르다.
  메인화면에 해당하는 HTML을 통째로 보내주기 때문
• SEO에 유리
  다른 페이지로 이동할 때마다 서버에서 새로운 페이지를 보내주는데, HTML기반이기 때문에 크롤링을 통해 색인이 가능. 새로운 페이지를 전달받기 때문에 각 페이지에 대한 meta 정보를 가지고 있어 SEO에 유리하다.

단점

• 화면 전환시 깜빡임(새로고침) 존재
  페이지 변경 과정에서 새로운 페이지를 받아와야해 깜빡임 문제가 발생
• 페이지 이동 속도가 느리다
  매번 새로운 페이지를 받아와야하기 때문