[React] SPA, CSR, SSR 개념 정리

SPA란?

SPA는 Single Page Application 의 약자로 단일 페이지로 구성된 웹 어플리케이션이다. 리액트가 SPA 방식을 채택하고 있다.

실제로 리액트 프로젝트에는 초반에 표시되는 index.html 파일 외에는 html 문서가 없고, 나머지는 다 자바스크립트를 이용해 index.html 파일의 내용을 바꾸어서 재 렌더링해주는 방식으로 페이지를 구성한다.

이러한 방식의 페이지 렌더링을 CSR(Cilent-Side Rendering) 이라고 한다.

리액트는 기본적으로 CSR방식을 채택하고 있다.

---

CSR(Cilent-Side Rendering) VS SSR(Server-Side Rendering)

• CSR(Cilent-Side Rendering)
  

맨 처음 url 요청에 웹 문서가 가지고 있는 모든 정보를 한번에 다 받아온다.

1. 그래서 초기 화면 로딩이 느리다.
2. 대신 로드가 되고 나면 사이트 내에서 돌아다니는 속도는 매우 빠르다. UX 측면에서 아주 좋다고 볼 수 있음
3. 또한 html 문서가 가진 정보가 적어서 검색엔진이 웹사이트를 분석하고 내용 파악을 하기 쉽지 않다. 이를 SEO(검색엔진 최적화)가 나쁘다고 한다.

• SSR(Server-Side Rendering)
  

각 페이지별로 따로 html 파일을 서버에 요청한다.

1. 각 페이지 별로 필요한 정보만 그때그때 요청하므로 렌더링 속도가 빠르다.
2. 대신 페이지를 이동할 때마다 서버 응답 과정을 거쳐야 한다. 그 과정에서 페이지가 무거울 경우 UX가 나빠질 수 있다. (화면이 깜빡인다던가, 등등)

---

Reference

SPA(Single Page Application)란?

리액트를 사용하는 이유 (SPA, CSR, SSR)