요약
SPAvsMPA: SPA(단일 페이지 애플리케이션)는 페이지를 동적으로 업데이트하며 사용자 경험을 향상시키는 반면, MPA(다중 페이지 애플리케이션)는 각 페이지를 새로고침하여 전체 페이지를 다시 불러와야 함.
SSRvsCSR: SSR(서버 사이드 렌더링)은 서버에서 페이지를 생성하여 클라이언트에 전송하는 반면, CSR(클라이언트 사이드 렌더링)은 브라우저에서 자바스크립트를 사용하여 동적으로 페이지를 렌더링함.
공부하게 된 이유
- React를 사용할 때, CSR은 초기 로딩이 빠르고 사용자 경험이 부드러워지는 장점을 가지고 있다고 배웠다.
- 겉의 내용만 알고 있었기에 좀 더 자세하게 공부하고 싶어 알아보았다.
👍 MPA 장점
SEO 관점에서 유리하다.
◦ MPA는 완성된 형태의 HTML 파일을 서버로부터 전달받는다. 따라서 검색엔진이 페이지를 크롤링하기에 적합하다.
첫 로딩 매우 짧다.
◦ 서버에서 이미 렌더링해 가져오기 때문이다.
◦ 그러나 클라이언트가 JS 파일을 모두 다운로드하고 적용하기전 까지는 각각의 기능은 동작하지않는다.
👎 MPA 단점
새로운 페이지를 이동하면 ‘깜빡’인다. (UX)
◦ 매 페이지 요청마다 리로딩(새로고침) 발생.새로운 페이지를 요청할 때마다 전체 페이지를 다시 렌더링하기 때문이다.페이지 이동시 불필요한 템플릿도 중복해서 로딩 (성능)서버 렌더링에 따른 부하모바일 앱 개발시 추가적인 백엔드 작업 필요 (생산성)개발이 복잡해질 수 있다.
👎 SPA 장점
자연스러운 사용자 경험 (UX)
◦ 전체 페이지를 업데이트 할 필요가 없기 때문에 빠르고 ‘깜빡’ 거림이 없다.필요한 리소스만 부분적으로 로딩 (성능)
◦ SPA의 Application은 서버에게 정적리소스를 한 번만 요청한다.그리고 받은 데이터는 전부 저장해놓는다. (캐시=Cache)서버의 템플릿 연산을 클라이언트로 분산 (성능)컴포넌트별 개발 용이 (생산성)모바일 앱 개발을 염두에 둔다면 동일한 API를 사용하도록 설계 가능 (생산성)
👎 SPA 단점
JavaScript 파일을 번들링해서 한 번에 받기 때문에 초기 구동 속도가 느리다. (Webpack의 code splitting으로 해결 가능)검색엔진최적화(SEO)가 어려움 (SSR로 해결 가능)보안 이슈 (프론트엔드에 비즈니스 로직 최소화)
◦ SSR에서는 사용자에 대한 정보를 서버측에서 세션으로 관리를 하지만 CSR 방식에서는 클라이언트측의 쿠키말고는 사용자에 대한 정보를 저장할 공간이 마땅치 않다.
2. SSR vs CSR
👍 CSR 장점
Javascript를 사용해서 동적으로 DOM을 그려내기 때문에 원하는 내용만 업데이트가 가능하다.
👎 CSR단점
HTML 파일을 하나만 받아와서 작동하기 때문에 각 페이지에 대한 정보를 담기힘들어 SEO에 취약하다.
👎 SSR 장점
CSR은 모든 로직이 담겨있는 Javascript 파일을 다운했지만 SSR은 클라이언트에서 요청한 페이지의 HTML을 다운하기 때문에CSR 보다 초기 진입시 로딩이 빠릅니다.
👎 SSR 단점
링크 이동 클릭시 새로운 HTML 파일을 가져오기 때문에 화면 깜빡임이 있다.
그래서 FOOTER 처럼 중복되는 내용도 다시 렌더링한다.
추가학습
- 잉? 그러면 CSR과 SPA는 같은거 아니야? —— 아니다!!
- SPA MPA는 페이지를 하나만 쓰는지 여러개 쓰는지의 차이이고 CSR SSR은 렌더링을 어디서 하냐의 차이로 비교 대상이 아니다..!
++ SPA에서 첫 페이지만 SSR을 하고 그 이후는 CSR을 하면 SPA가 유지된다.
즉 SPA에서 SSR을 할 경우 SEO(검색엔진최적화) 에 더 좋다는 장점이 있다.
+ link 컴포넌트와 'a'의 차이점 그리고 useNavigate??
- 'a'는 전체 페이지를 재렌더링 시킨다.
- link 는 spa의 특징에 맞게 필요한 부분만 재랜더링하고 나머지는 유지가 된다.
즉 a는 외부 프로젝트와의 연결 link는 프로젝트 내에서 페이지 전환 할때 사용한다!
- useNavigate는 페이지 전환 전 특정 조건을 처리해야하는 로직을 필요로 할 때 사용한다.
ex) 회원가입 되어 있는 사용자 → main 페이지 이동
ex) 회원가입이 되어 있지 않은 사용자 → signUp 페이지 이동
+ SEO는 뭐야?
- SEO는 "Search Engine Optimization(검색 엔진 최적화)"의 약자로, 웹사이트나 웹페이지를 검색 엔진에서 높은 순위로 나타나게 하는 프로세스를 가리킵니다.
- SEO는 특정 검색어에 대해 웹사이트가 노출되도록 최적화하고, 검색 엔진 알고리즘에 부합하는 콘텐츠, 링크 구조, 속도 등을 조절하여 웹사이트의 가시성과 트래픽을 증가시키는 데 중점을 둡니다.
- 좋은 SEO를 통해 사용자는 원하는 정보를 빠르게 찾을 수 있고, 웹사이트 소유자는 더 많은 방문자를 유치할 수 있습니다.
