React / SPA vs MPA

 

React는 상태 변경 함수를 사용하지 않으면 상태 변경을 감지하지 못한다. 불필요한 렌더링을 방지하기 위해 상태 변경을 감지해야만 화면을 업데이트 하도록 하는 작동방식 때문이다.

React는 변경된 상태를 사용하는 컴포넌트만 리렌더링해 업데이트 하는 SPA 구현 방법을 사용해 대표적인 SPA 라이브러리이다.

 

 

SPA(Single Page Application) : 한 개의 페이지로 구성된 애플리케이션

작동 방식

• 초기에 HTML 1개만 로드
• 이후 페이지 이동은 JS로 필요한 데이터만 받아와 그려줌 (URL이 바뀌어도 실제로 한 페이지에서 동작)
• 페이지 전환시 새로고침이 일어나지 않아 앱처럼 부드럽게 작동

특징

• CSR(Client Side Rendering) : 화면을 완성하는 주체가 클라이언트
• 초기 로딩이 좀 무겁지만 이후에는 페이지를 다시 로드할 필요가 없기 때문에 빠르며, 서버에 대한 요청이 줄어들어 서버 부담이 감소됨
• 처음에는 빈 html 파일 상태이기 때문에 검색 엔진이 크롤링하기 어려움
• React Router 라이브러리로 React의 SPA구현을 도울 수 있음.

 

CSR의 작동 과정

 

 

↔ MPA(Multi Page Application) : 여러 개의 페이지로 구성된 애플리케이션 

작동 방식

• 사용자가 페이지를 이동할 때마다 서버에 요청을 보냄
• 서버는 새로운 HTML 문서 전체를 응답하고 클라이언트에게 보냄
• 브라우저는 매번 전체 페이지를 새로 로드함

특징

• SSR(Server Side Rendering) : 화면을 완성하는 주체가 서버 (서버에서 페이지를 렌더링해 브라우저에 보여주기 때문)
• 플리커 현상 등 페이지 간 이동이 부드럽지 않아 좋지 않은 사용자 경험을 가져다줄 수 있음
• 초기 로딩이 빠르다
• 검색 엔진 최적화에 유리하다 (각 페이지가 별도의 HTML 파일이므로 검색 엔진이 쉽게 크롤링이 가능)

 

SSR의 작동 과정

 

 

 

 

 

이미지 출처
https://www.solutelabs.com/blog/client-side-vs-server-side-rendering-what-to-choose-when