[React] SPA, CSR은 같을까 다를까

답부터 이야기 하자면 SPA, CSR은 같지 않다. 애초에 비교 대상이 아니다.

 

CSR(Client Side Rendering)

사용자가 웹 브라우저에 주소를 입력하면 데이터가 없는 빈 HTML만 받아오고, 데이터는 여러 static 파일들이 로드된 이후에 요청해서 받아오는 방식으로 진행됨

SSR(Server Side Rendering)

CSR과 반대로 데이터까지 모두 삽입하여 완성된 HTML을 받아오는 방식으로 진행됨

SPA(Single Page Application)

서버로부터 첫 페이지만 받아오고 이후에는 동적으로 페이지를 구성하여 새로운 페이지를 받아오지 않는 웹 어플리케이션을 말함

데이터를 수정하거나 조회할 때 페이지가 새로고침 되지 않고 다른 페이지로 넘어가지 않음

MPA(Multiple Page Application)

서버로부터 완전한 페이지를 받아오고 이후에 데이터를 수정 및 조회할 때 다른 완전한 페이지로 이동

URI가 바뀔 수도 있음

---

CSR과 SPA는 같을까?

CSR과 SPA는 같지 않음. 

SPA는 서버로부터 페이지를 받아오고 이후에는 동적으로 DOM을 구성하여 렌더링 되는 화면이 바뀜.

이때 동적으로 DOM을 구성하여 렌더링 되는 화면이 바뀌는 부분이 CSR임.

 

즉 SPA는 처음에만 페이지를 받아오고 이후에는 받아오지 않기때문에 데이터가 수정되고 조회가 되도록 만들어주기 위해 CSR 방식을 체택한 것이다. 

 

반대로 MPA는 동적이지 않은 페이지를 상황에 맞게 클라이언트에 뿌려주기 때문에 SSR 방식을 채택한 것임

 

결국 SPA와 CSR은 비교 대상이 아님.

SPA와 MPA는 페이지를 여러 개 쓰냐 한 개만 쓰냐의 차이이며, CSR과 SSR은 렌더링을 어디서 하냐의 차이임.

---

SPA에서의 SSR, MPA에서 CSR

SSR만으로 SPA의 구현이 가능할까? 그리고 CSR만으로 MPA(페이지가 여러개라고 가정) 구현이 가능할까?

결론적으로 위 대답은 불가능하다이다.

 

왜냐하면 SPA에서 데이터 부분을 전부 SSR로 만들면 그건 더이상 SPA가 아닌 MPA이고 반대도 마찬가지이다.

---

SPA에서 부분적 SSR 사용

SSR로만은 SPA를 구현할 수 없지만, 첫페이지만 SSR로 구현하고 이후에는 CSR을 하면 SPA에서도 SSR을 사용할 수 있다. 또한 SEO(검색 엔진 최적화)은 CSR보다 SSR에서 성능이 뛰어나기 때문에 SPA에서 SSR을 사용하여 SEO을 할 수 있다.

 

다만, 처음에 SSR을 하고 이후에 CSR을 하는 방식에서는 SEO에 도움이 안되기 때문에 UX에 지장이 가지 않는 선에서 페이지를 여러 페이지로 쪼개고, 기존에 SPA에서 하던 CSR부분을 놔두는 편이 좋다.

 

참조

https://blog.the-compass.kr/csr-ssr-spa-mpa-ede7b55c5f6f

CSR, SSR, SPA, MPA? 상사한테 혼나기 전에 알아야하는 것

https://velog.io/@hlna0308/SPA%EC%99%80-CSR%EC%9D%80-%EA%B0%99%EC%9D%84%EA%B9%8C

SPA와 CSR은 같을까?