[React] 리액트 : #4 싱글 페이지 어플리케이션(SPA)

우리는 Vue.js, React, Angular 등으로 SPA를 구현할 수 있다!

오늘은 SPA에 대해 알아보자.

---

SPA ?

 

SPA는 Single Page Application의 약자로 

이름 그대로 '단일 페이지 응용 프로그램'으로 해석한다.

 

단일 페이지 응용 프로그램이란

사용자가 여러 페이지를 옮겨 다니는 것이 아니라 한 페이지 내에서 머무르고,

서버로부터 전달받은 데이터로 필요한 부분만 동적으로 업데이트해 보여주는 방식을 말한다.

(☝🏻 이러한 방식이 '클라이언트 사이드 렌더링')

 

이러한 방식 덕분에 리액트의 특징에 대해 이야기하며 언급한

웹을 앱처럼 사용하는듯한 빠르고 부드러운 사용자 경험(UX)이 가능한 것이다.

 

+)
만약 페이지를 이동할 때마다 서버로부터 새로운 html을 요청해
다시 DOM트리를 생성하여 완전히 새로운 전체 페이지를 렌더링하게 된다면
상대적으로 빠르고 부드럽지 못할 것이다!
(☝🏻 이러한 방식이 '서버 사이드 렌더링')

리액트로 만들어진 SPA는 대부분 '클라이언트 사이드 렌더링' 방식 (무조건 CSR ❌)

 

 

렌더링 방식에 따라 '클라이언트 사이드'과 '서버 사이드' 렌더링으로 나눌 수 있다.

조금 더 자세히 알아보자!

 

 

CSR ? SSR ?

 

CSR(Client Side Rendering)

'클라이언트 사이드 렌더링'은
클라이언트 단에서 화면을 렌더링하는 방식

SSR(Client Side Rendering)

'서버 사이드 렌더링'은
서버 단에서 화면을 렌더링하는 방식이다.

 

 

과거에 비해

• 모바일 사용의 증가
• 사용자와의 인터랙션 증가
• 웹에서 제공하는 정보나 데이터가 증가하면서

 

전통적인 서버 사이드 렌더링 방식을 사용할 경우 발생하는

여러번의 렌더링 작업(서버의 부담)과 불필요한 트래픽 발생(성능상의 이슈)을 덜고자 등장했다.

 

 

클라이언트 사이드 렌더링의 경우,

 

일단 페이지 첫 로드 시 필요한 모든 정적 리소스를 내려받는다.

그리고 이후에 요청 시 필요한 데이터만 전달 받아

클라이언트 단에서 렌더링과정을 거쳐 갱신하므로

 

첫 ! 화면이 나오는데 까지는 서버사이드 렌더링에 비해 상대적으로 느린 편이다.

하지만 부드럽고 빠른 페이지 전환이 가능하다.

또한 서버에 데이터를 요청하는 횟수가 적다.

 

하지만, 검색 엔진 최적화(SEO)가 어렵다는 이슈가 존재한다.