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

비니·2023년 4월 28일
CSRMPAReactSSRspa
0

React

목록 보기
2/4
post-thumbnail
post-custom-banner

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

profile
비니
이전 포스트

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

다음 포스트

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

post-custom-banner

1개의 댓글

comment-user-thumbnail
장명지
2023년 4월 30일

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

좋은글 감사합니다~

답글 달기