오늘도 어김없이 알고리즘 문제를 풀고 js강의를 들었다.
미니프로젝트 들어가기 앞서 피그마 사용법도 대충 익혔고 앞으로 있을 팀플을 대비해서 노션파일도 정리를 했다. 그리고 곧 배울 spa프레임워크인 리액트를 배우기 전에 spa와 mpa의 개념과 csr과 ssr의 개념을 머릿속에 넣고 가기로 했다.
MPA (Multiple Page Application)
여러개의 페이지로 구성 된 어플리케이션이다.
MPA는 새로운 페이지를 요청할 때 마다 정적리소스가 다운로드 된다. 매번 전체페이지가 다시 랜더링 된다는것이다.
장점
-
SEO 관점에서 유리하다.
- MPA는 완성된 형태의 HTML 파일을 서버로부터 전달받는다.
- 따라서 검색엔진이 페이지를 크롤링하기에 적합하다. -
첫 로딩이 매우 짧다.
- 서버에서 이미 렌더링해 가져오기 때문이다.
단점
- 새로운 페이지를 이동하면 깜빡인다.
- 서버에 매번 요청하기 때문에 서버의 부담이 크다.
SPA (Single Page Application)
한개의 페이지로 구성된 어플리케이션이다.
SPA는 웹 에플리케이션에 필요한 모든 정적 리소스를 최초 한 번에 다운로드 한다, 그 이후 새로운 페이지 요청이 있을 때, 페이지 갱신에 필요한 데이터만 전달 받아서 페이지를 갱신한다.
장점
- 자연스러운 사용자 경험
깜빡임 현상이 없다.
네이티브 앱에 가까운 자연스러운 페이지 이동 - 웹성능 향상
필요한 리소스만 부분적으로 로딩
서버템플릿연산을 클라이언트로 분산 - 생산성 향상
컴포넌트 별 개발용이 (유지보수,협업업무분담)
단점
- 첫 랜더링속도가 느림
- 검색엔진최적화에 취약 (하지만 라이브러리를 통해 보완가능)
- 보안이슈
CSR & SSR
CSR(Client Side Rendering) : 최초 로드시 필요한 파일들을 전부 받고 , 사용자의 인터랙션에 따라서 클라이언트단에서 데이터를 처리하고 랜더링 해주는 방식이다.
SSR(Server Side Rendering) : 요청시마다 새로고침이 일어나며 서버에 새로운 페이지에 대한 요청을 하는 방식이다.
요약을 하자면...
mpa/spa , csr/ssr 에 대해 정리했는데 너무 깊게 생각할 필요가 없을것 같다.
spa를 ssr방식으로 렌더링 할수 있다. (react 프레임워크엔 ssr방식인 next가 있고 , vue 프레임워크엔 ssr방식인 nuxt 가 있다.)
페이지가 하나 이상이면 MPA , 한페이지에서(nav바 페이지 이동시 새로고침x) js를 동적으로 새로고침없이 다룰수 있으면 SPA 이다.
그리고 CSR은 서버에서 모든걸 받아와서 클라이언트단에서 동적으로 처리 , SSR은 요청할 때 마다 서버에서 받아와서 처리한다는 것으로 기억하자.
