React_Study [ SPA & MPA, CSR & SSR ]

이준석·2023년 5월 15일
0

React_Study

목록 보기
4/8
post-thumbnail

SPA & MPA

SPA( SinglePageApplication )

  • 하나의 페이지로 이루어진 웹어플리케이션
    • 렌더링 방식 CSR (ClientSideRendering) 사용
    • 웹어플리케이션에 필요한 정적 리소스를 초반 한 번에 모두 다운로드
      • 새로운 페이지 요청이 있을 경우 갱신에 필요한 데이터만을 서버에 받고,
        클라이언트에서 렌더링을 갱신 ⇒ 자연스러운 페이지 갱신

MPA ( MultiPageApplication )

  • 여러개의 페이지로 이루어진 웹어플리케이션
    • 렌더링 방식 SSR (SeverSideRendering) 사용
    • 새로운 페이지 요청이 있을 경우 서버에서 이미 렌더링된 정적리소스를 받아옴
  • 무조건 SPA == CSR, MPA == SSR?
    • SPA, MPA는 페이지 갯수에 따른 개념
    • CSR, SSR은 렌더링이 어디서 이루어지냐에 따른 개념
    • 두가지 분리 필요
  • MPA와 SPA에서의 상태관리
    • MPA에서는 서버의 데이터를 이용해 페이지를 렌더링하므로,
      클라이언트의 데이터와 서버의 데이터가 큰 차이를 가지지 않음
    • SPA에서는 자체적으로 데이터를 갖고, 서버와의 동기화가 필요한 데이터만을 처리
      그 외의 데이터는 Client만의 데이터로 유지

CSR & SSR

CSR, SSR의 개념

  • ClientSideRendering
  • SeverSideRendering
    • 요청할 때 즉시 만드니까 데이터가 달라져서 미리 만들어두기 어려운 페이지에 적합
  • StaticSiteGeneration
    • 미리 다 만들어두니까 바뀔 일이 거의 없는 페이지에 적합
    • (캐싱해두기 좋은 페이지에 적합)

CSR

  • 동작 방법
    1. 웹사이트 방문
    2. 브라우저가 서버에 콘텐츠 요청
    3. 서버에서 빈뼈대HTML, 연결된 JS링크(React) 전달
      • 서버에 부하가 적어
      • 브라우저의 웹크롤링 부분에서 HTML에 정보가 없기 때문에 검색엔진에서 낮은 평가를 받을 수 있음
    4. 브라우저가 HTML파싱 후 서버로 부터 다시 JS다운로드
      • 초기 로딩 속도 느림
      • 이후 구동 속도 빠름 (UX 측면에서 좋)
    5. 동적DOM생성 후 렌더
  • 어떤 상황에 좋을까
    • 유저와 상호작용이 많을 때
    • 검색엔진 노출이 필요없을

SSR

  • 동작 방법
    1. 웹사이트 방문
    2. 브라우저가 서버에 콘텐츠 요청
    3. 서버에선 즉시 필요한 데이터를 얻어와 모두 삽입하고 CSS 적용까지 마친 HTML코드와 JS코드를 전달
      • HTML에 정보가 있기 때문에 검색엔진 최적화에 유리
    4. 브라우저는 바로 HTML렌더 → JS코드 다운로드 → HTML에 JS로직 연결
      • JS코드 다운로드 전 사용자가 HTML화면을 볼 수 있음 (초기 구동 속도 빠름)
      • (JS코드가 다운로드 되기 전에는 이벤트가 이루어지지 않음)
  • 어떤 상황에 좋을까
    • 회사홈페이지 같이 검색엔진 노출이 필요
    • 누구에게나 항상 같은 내용을 보여줄 때
    • 잦은 업데이트

0개의 댓글