리액트의 SPA와 CSR 방식

리액트는 기본적으로 페이지 이동과 관련해서 SPA와 CSR 방식을 사용합니다.

이 글에서는 리액트에서 사용하는 SPA와 CSR 방식이 무엇인지 알아보겠습니다.

그 전에 MPA 방식과의 비교를 위해 MPA 방식을 먼저 소개하겠습니다.

1. MPA (Multi-Page Application)

MPA(Multi-Page Application)는 다중 페이지 애플리케이션을 의미하며, 전통적인 웹 애플리케이션 구조입니다.

각 페이지는 서버로부터 새로운 HTML을 받아와 전체 페이지를 다시 로드하는 방식으로 동작합니다.

즉, 여러 개의 페이지(HTML)를 준비해놨다가 요청이 들어오면

그 요청 경로에 따라 적절한 페이지를 보내주는 방식입니다.

따라서 각각이 새로운 요청이기 때문에 화면이 새로고침처럼 바뀌게 됩니다.

위 보이는 탭처럼 페이지 페이지가 새로고침 되듯이 깜빡입니다.

2. SPA (Single Page Application)와 CSR (Client-Side Rendering)

SPA(Single Page Application) :

SPA는 단일 페이지 애플리케이션을 의미하며,

웹 애플리케이션을 하나의 페이지로 구성하고 동적으로 필요한 부분(컴포넌트)만 변경(업데이트)하는 개념입니다.

사용자가 애플리케이션 내에서 다른 경로로 이동할 때,

페이지 전체를 다시 불러오지 않고 필요한 부분만 업데이트하여 빠른 페이지 전환과 부드러운 사용자 경험을 제공합니다.

즉 리액트에서는 웹사이트가 요청 했을 때

SPA 방식은 어떤 요청이든 똑같은 HTML을 보내주고 리액트 앱을 통째로 던져줍니다.

여기서 다른 페이지로 이동하고 싶어서 어떤 버튼을 클릭했을때

서버한테 달라고 요청하는게 아니라 리액트 앱이 알아서 페이지를 업데이트 시킵니다.

원래 페이지 이동이 서버랑 통신을 해서 됐어어야 했는데 그냥 브라우저가 혼자 알아서 처리하면 되니까
서버 대기시간 없이 페이지가 빠르게 업데이트 되어버립니다.

페이지를 이동할 때마다 서버랑 통신해서 기다리는 시간 자체가 없어져서 페이지 전환이 빨라진 것입니다.

데이터가 필요한 경우에는 서버와 데이터만 요청하고 전달 받게 됩니다.

CSR(Client-Side Rendering) :

CSR은 Client-Side Rendering을 의미하며,

웹 브라우저에서 JavaScript를 사용하여 동적으로 페이지를 렌더링하는 방식입니다.

브라우저가 페이지를 요청하면 서버는 필요한 데이터만을 JSON 형태로 전송하고,

브라우저는 이 데이터를 이용하여 동적으로 페이지를 생성합니다.

쉽게 말해서 Client-Side Rendering 의미 그대로

브라우저(클라이언트) 측에서 알아서 직접 페이지를 랜더링을 하는 방식입니다.

 

여기까지만 봐도 SPA와 MPA 방식의 차이점이 보이지 않나요?

3. SPA와 MPA의 차이점:

페이지를 이동시에 mpa 방식은

html 문서부터 데이터까지 다 한꺼번에 조립해서 받아야해서 오래걸렸지만
spa 방식을 사용한 페이지 이동은

일단 웹 페이지 먼저 바꿔 버리고 데이터가 없다면 로딩을 잠깐 띄워놓고
데이터 들어오면 그 때 데이터를 보여주면 되기 때문에 굉장히 빠른 페이지 이동을 가지게 됩니다.

4. 장단점

SPA, CSR의 장단점:

• 장점:
  • 부드러운 사용자 경험과 빠른 페이지 전환.
  • 필요한 데이터만을 동적으로 로드하여 네트워크 트래픽 효율화.
• 단점:
  • 초기 로딩 속도가 느릴 수 있음.
  • 검색 엔진 최적화에 어려움이 있을 수 있음.

MPA의 장단점:

• 장점:
  • 검색 엔진 최적화에 유리.
  • 전통적인 웹 개발 방식으로 구현하기 간편.
• 단점:
  • 페이지 전환 시 화면 깜빡임이 발생할 수 있음.
  • 전체 페이지를 다시 로드해야 하므로 느린 페이지 전환.

5. 마무리

SPA, CSR, MPA는 각각의 아키텍처가 가지고 있는 특징과 장단점을 고려하여

프로젝트의 요구 사항에 맞게 선택되어야 합니다.

리액트는 SPA 및 CSR을 효과적으로 구현할 수 있는 프레임워크이며, MPA와도 통합하여 사용될 수 있습니다.

최근에는 자바스크립트의 기술이 상당한 발전을 하고 있기에 

많은 웹사이트들이 SPA 방식으로 전환을 하고 있습니다.

프로젝트의 규모, 성격, 요구 사항에 따라 적절한 아키텍처를 선택하여

개발하면 효율적인 웹 애플리케이션을 구축할 수 있을 것입니다.

리액트를 사용한다면 기본적으로 SPA와 CSR을 사용하는 것을 권장드립니다.