CSR, SSR, SPA, MPA

sixhustle·2022년 3월 18일
0

Client

목록 보기
2/3

Rendering

HTML, CSS, Javascript 등 개발자가 작성한 문서를 브라우저에 그래픽 형태로 출력하는 과정

CSR(Client Side Rendering)

  • 데이터가 없는 html만 받아온다.
  • 데이터는 html/static 파일들이 로드된 후에 요청해서 받아온다.
  • 장점
    • 화면을 모두 그린 후에는 서버의 의존도가 낮기 때문에 빠른 화면 전환이 가능하다.
    • 보통 S3 + CloudFront 구성을 사용하여 SSR보다 경제적이다.
  • 단점
    • 초기에 javascript를 읽어 무엇을 그려야할지 판단하기 때문에 딜레이가 생긴다.
    • 데이터가 없는 html이기 때문에 크롤링할 때 아무 내용이 없어 SEO(Search Engine Optimization: 검색엔진최적화)에 취약하다.

SSR(Server Side Rendering)

  • 데이터까지 전부 삽입하여 완성된 html을 받아온다.
  • 여러 클라이언트를 감당해야하는 부담감이 있다.
  • 따라서, 정적인 컨텐츠를 주로 다루며, 이를 캐싱하여 사용한다.
  • 동적인 컨테츠를 많이 다루면, 캐시 적용도 어렵기 때문에 단점이다.

고려해야할 관점

  • 페이지 로딩 시간
  • 서버 자원 사용
  • 네트워크의 성능
  • SEO 최적화 유무

MPA(Multi Page Application)

  • Interaction이 발생할 때마다 서버로부터 새로운 파일을 받는다.
  • 페이지를 이동하면서 새로 렌더링한다.

SPA(Single Page Application)

  • React는 index.html 하나의 파일로 구성되어 있다.
  • 페이지가 한 번 로딩되면, 페이지가 새로 고침되지 않고 다른 페이지로 넘어가지 않는다.

Reference

0개의 댓글