SPA, MPA / CSR, SSR 줄임말 시리즈 이해 하기 👀

비니·2023년 4월 28일

CSR MPA React SSR spa

React

목록 보기

2/4

SPA가 SEO가 어렵다는 설명을 더 이해하고 싶어서 SPA에 대해 추가 학습하는 겸 정리해 본 자료들!!

SPA ↔ MPA 🥸

(Single Page Application) ↔ (Multi Page Application)

MPA
- 여러 개(Multiple)의 페이지로 구성된 어플리케이션
- 새로운 페이지 요청을 할 때마다 정적 리소스 다운로드.
  - 매번 전체 페이지가 다시 렌더링
    👍 서버에서 이미 렌더링해서 가져오기 떄문에 첫 로딩 빠름
- 웹 페이지 화면마다 완성된 정적 html로 보여
  👍 SEO 측면에서 유리함 (크롤링에 적합)
- 클라이언트가 서버에 페이지 요청시, 클라이언트에게 HTML만 넘겨줌
- 페이지마다 키워드가 노출되어 있어 검색이 쉬움
- 매 페이지 요청마다 리로딩 발생 함
  👎 페이지 이동마다 “깜빡”
- 서버렌더링에 의해서
  👎 서버에 대한 가중.
- 페이지를 이동할 때
  👎 사용하지 않는 템플릿도 중복해서 로딩함.
SPA

하나(Single)의 페이지로 구성된 어플리케이션
- 웹 애플리케이션에 필요한 모든 정적 리소스를 최초 한 번에 다운로드
- 이후 새로운 요청이 있을 때 페이지 갱신에 필요한 데이터만 전달 받아서 페이지 갱신
  👍 “깜빡” 없이 자연스러운 사용자 경험
- SPA는 CSR 방식으로 렌더링
- html단 구성이 심플해서 크롤러가 크롤링 해 올 컨텐츠가 없음
  👎 SEO에서 약점을 보임
```
<body>
	<div id="app"> </div>
```

검색 노출이 중요하지 않은 서비스라면?

- 검색 노출이 중요하지 않다면 메타 태그를 활용해서 최소한의 정보는 검색될 수 있게 세팅할 수 있다!
🔗: https://satisfactoryplace.tistory.com/150

⚠️ 그렇지만 SPA 방식이 절대적으로 CSR인 것은 아니다 ⚠️

➡ React는 SPA로 CSR로 렌더링되지만 프레임워크 Next.js를 활용해서 서버사이드렌더링(SSR) 이 가능하게 구현할 수 있음.

SSR ↔ CSR 🥸

(Server Side Rendering) ↔ (Client Side Rendering)

SSR
- 서버가 화면을 완성함 { 소스 코드를 제공하는 쪽 }
- 서버 쪽에서 렌더링 준비를 끝마친 상태로 클라이언트에 전달
- 서버에서 이미 렌더 가능한 상태로 클라이언트에 전달되어
  JS가 다운로드 되는 동안 사용자는 무언가를 보고 있을 수 있음.
CSR
- 클라이언트의 화면 완성 (소스코드를 받은 쪽 (브라우저))
- SSR과 달리 렌더링이 클라이언트 쪽에서 일어남.
- 서버는 요청을 받으면 클라이언트에 HTML과 JS를 보냄
- 서버에서 처리 없이 클라이언트로 보내주기 때문에 JS가 모두 다운로드 되고 실행이 끝나기 전까지 사용자는 볼 수 있는게 없음
  ➡ 이 시간을 줄이는 것이 키 포인트 🔑
  
  차이
  SEO
  1. 검색 엔진은 크롤러로 웹 사이트를 읽는데 •••
    - CSR은 JS를 실행시켜 동적으로 컨텐츠 생성
    ➡️ JS가 실행되어야지만 메타데이터가 생성되어 크롤러가 읽을 수 있음.
    - SSR은 서버 사이드에서 컴파일되어 클라이언트로 넘어오기 때문에 클로러 대응에 용이
  웹페이지 로딩 시간
  1. 첫 페이지 로딩 시간
    1. SSR > CSR
    2. CSR은 HTML, CSS와 모든 스크립트들을 한 번에 불러오고 SSR은 필요한 부분의 HTML과 스크립트만 불러옴
  2. 첫 페이지 이외 로딩 시간 (사이트가 다른 곳으로 이동하는 경우에 ••• )
    1. CSR > SSR
    2. CSR은 이미 다 불러온 상태 / SSR 은 첫 페이지 로딩 과정을 다시 실행
  서버 자원 사용
  1. SSR > CSR
    1. CSR은 클라이언트 단에서 일을 주로 처리해 서버에 부하가 적음
    2. SSR은 매번 자원을 요청해 서버 자원을 더 많이 사용

➡ 리액트 프레임워크로 Next를 사용하는 이유도
기존 CSR 환경에서 돌아가던 리액트를
SSR 형태로 구현해 SEO 최적화 하기 위함!!! 👊

😪💛

🔗 참고링크

🔗 SPA와 SSG, 그리고 SSR
🔗 어서 와, SSR은 처음이지? - 도입 편 - NAVER D2
🔗[간단정리] CSR vs SSR 특징 및 차이 - 넌 잘하고 있어 - 티스토리
🔗Next.js 란? Next.js를 왜 사용할까? Next.js의 장점은? - velog
🔗 Create a Next.js App
🔗 SPA와 MPA 차이, 장단점 비교 (웹사이트 검색 노출 원리) - IT blog

비니

이전 포스트

[React] FullCalendar 구글 연동 / 리액트 풀캘린더 구글 연동

다음 포스트

리액트에서 상태관리가 필요한 이유

1개의 댓글

장명지

2023년 4월 30일

와아! 정말 깔끔하게 정리해주셨네요!
크롤러가 크롤링 해 올 컨텐츠가 없어서 리액트가 SEO에서 취약하단걸 덕분에 알 수 있게 되었어요! 감사합니다!
저도 프로젝트할때 next.js를 사용했던게 seo최적화에 가장 적합하다고 해서 사용했었어요!
실제로 사용할때도 모든 페이지에 동일한 description 또는 og 태그를 보여주고 싶다면 굳이 해당 컴포넌트에 하나하나 작성하지 않고도 _document에 모두 작성하면 되니까 간단하고 편하게 사용할 수 있더라고요!

좋은글 감사합니다~

답글 달기