[리액트] SPA / SSR / CSR 방식

◼ SPA(Single Page Application)

- 어플리케이션 생명 주기 중에서 단 한 번만 리소스(HTML, CSS, JavaScript) 를 로딩하고, 그 후에는 데이터를 받아올 때만 서버와 통신

- 단 하나의 HTML 문서로만 돌아가는 웹페이지, 사용자의 요청(request)에 따라 내용이 동적으로 바뀜

 

즉, 첫 요청시 딱 한 페이지만 불러오고 페이지 이동시 기존 페이지의 내부를 수정해서 보여주는 방식

 

- 사용자(클라이언트) 관점에서 다시 말하자면, 최초 페이지를 로딩한 시점부터는 페이지 리로딩 없이 필요한 부분만 서버로 부터 받아서 화면을 갱신하는 것 입니다

 

등장배경

모바일 시대가 도래하면서 모바일 환경에 최적화된 서비스가 필요해졌으나 일반적인 컴퓨터에 비해 성능이 낮은 모바일에 최적화시키는 일이란 매우 어려운 일이었고, 기존과 다른 방식이 필요했다. 그래서 등장한 개념이 바로 SPA다.

 

 

동적인 사이트를 어떻게 렌더링 하냐에 따라 CSR과 SSR로 나뉜다. 

◼ CSR(Client Side Rendering, 클라이언트 사이드 렌더링)

클라이언트 사이드 렌더링은 SPA로, 클라이언트 측에서 HTML을 반환한 후에, JavaScript가 동작하면서 데이터만을 주고받아 클라이언트에서 렌더링을 진행하는 것.

 

장점

필요한 부분만 갱신하기 때문에 네이티브 앱에 가까운 자연스러운 페이지 이동과 사용자 경험(UX)을 제공

필요한 리소스만 부분적으로 로딩

서버의 탬플릿 연산을 클라이언트로 분산

 

단점

JavaScript 파일을 번들링해서 한 번에 받기 때문에 초기 구동 속도(렌더링) 느림

검색엔진최적화(SEO)가 어려움

왜? 모든 페이지는 하나의 HTML 파일의 정보를 바라보고 있어, 검색서비스 노출 및 SNS 공유 기능 등이 원하는대로 동작할 수 없다.

 

◼ SSR(Server Side Rendering, 서버사이드 렌더링)

서버에서 렌더링을 작업하는 렌더링 방식, 전통적인 웹 어플리케이션 렌더링 방식으로 사용자가 웹 페이지에 접근할 때, 서버에 각각의 페이지에 대한 요청을 하며 서버에서 HTML 및 JavaScript 파일 등을 모두 다운로드해서 화면에 렌더링 하는 방식.

 

MPA(Multiple Page Application)는 페이지를 이동할 때마다 새로운 페이지를 요청. 

모든 탬플릿은 서버 연산을 통해서 렌더링하고 완성된 페이지 형태로 응답합. 이 과정을 SSR이라고 함

 

장점

검색 엔진 최적화(Search Engine Optimization)

SEO에 사용되는 meta 태그들이 미리 정의되어 SEO 에 유리

초기 렌더링 속도가 빠르다

클라이언트에서 구성하는 CSR(client-side rendering)보다 페이지를 구성하는 속도는 늦어지지만 전체적으로 사용자에게 보여주는 콘텐츠 구성이 완료되는 시점은 빨라진다(서비스에서 필요한 데이터를 클라이언트(브라우저)에서 추가로 요청하여 재구성해야 하기 때문에)

 

단점

페이지 이동시 화면 깜빡임(UX)

간단한 수정도 서버를 거쳐야 함.

페이지 이동시 불필요한 탬플릿도 중복해서 로딩

연속 서버 렌더링에 따른 서버 부하 및 서버 비용 증가

매 페이지 요청마다 페이지 리로딩(새로고침)이 발생

서버의 리스폰스에 의존해서 페이지를 이동해야하기 때문에 퍼포먼스, 사용자 경험(UX) 측면에서 SPA에 비해 떨어진다

 

◼ SEO(Search Engine Optimization)

검색 최적화의 의미, 사이트를 노출 시키는 것

PageRank에 따르고, 사람들이 페이지를 많이 방문하고 언급이 많을 수록 신뢰도가 높아져 상위 노출이 가능하다.

잘 안된 사이트는 검색해도 나오지 않는다.

 

그렇다면 CSR에서 SEO를 할 수는 없을까?

REACT에서 react-helmet 과 react-snap 를 함께 사용
react-helmet 을 통해 메타 태그를 셋팅하고, react-snap 을 통해 index.html 을 생성