최근 리액트를 공부하면서 리액트는 SPA방식을 기반으로 동작한다는 것을 알았다. 화면을 전체 새로고침하지 않고 필요한 부분만 다시 재렌더링하여 보여주므로 서버입장에서도 트래픽이 과도하게 요청될일이 없어 정말 좋은 방식이라고 생각했다. 하지만 SPA가 무조건 좋을까라는 의구심이 들어 각 방식에 대해 알아보기로 하였다.
SPA, CSR
- SPA(Single Page Application)는 한 개(Single)의 Page로 구성된 Application이고 CSR(Client Side Rendering) 방식으로 렌더링한다.
- 즉, 기본적으로 단일 페이지로 구성되며 기존의 서버 사이드 렌더링과 비교할 때 배포가 간단하며 네이티브 앱과 유사한 사용자 경험을 제공할 수 있다는 장점이 있다.
- SPA는 웹 애플리케이션에 필요한 모든 정적 리소스를 최초 접근시 단 한번만 받아오므로 이후 새로운 페이지를 요청 할 때 페이지 갱신에 필요한 데이터만을 JSON으로 전달받아 페이지를 갱신하므로 전체적인 트래픽 감소에 따라 새로고침이 발생되지 않는다.
- 하지만 검색엔진최적화(Search Engine Optimization)가 어렵고 초기에 리소스를 전부 다 받기 때문에 초기 구동속도가 느리다는 단점이 있다.
MPA, SSR
- 여러 개(Single)의 Page로 구성된 Application이고 SSR(Server Side Application) 방식으로 렌더링한다.
- CSR과 다르게 서버에서 이미 렌더링 하여 가져오기 때문에 초기 페이지 로드시간이 빠르다.
- JS를 이용한 렌더링이 아니기 때문에 검색엔진 최적화가 가능하다.
- 하지만 매번 페이지를 요청할 때마다 새로고침 되기 때문에 깜빡이고 서버의 부하가 커진다는 단점이 있다.
그럼 SSR과 CSR 중 성능이 어떤게 더 좋을까?
성능에 따라 우선순위를 결정할 수 없다. 각 방식 마다 장단점이 다르므로 웹 개발 설계시 조건을 고려하여 방식을 정하는것이 좋다.
'프로그래밍' 카테고리의 다른 글
| React로 Chrome Extension 개발해보기 (0) | 2024.04.27 |
|---|---|
| React.memo로 컴포넌트 최적화 해보기 (0) | 2023.12.02 |
