CSR / SSR / SPA / MPA

렌더링 방식에 대한 차이로 나뉘는 CSR & SSR (렌더링을 어디서하느냐)

CSR (client side rendering)

• 동작순서
  • 서버에서 브라우저로 응답을 보냄
    -> 브라우저에서 js script를 다운받음
    -> 브라우저가 react를 실행함
    -> 페이지 렌더 (페이지 최초 렌더)
• 단점
  • 1) SEO (search engine optimization / 검색엔진최적화) 불가/어려움 (why? 크롤러가 js만으로 되어있는 웹페이지를 읽지 못함)
  • 2) 처음에 모든 html 과 static파일을 로드해야하기 때문에 최초 페이지가 렌더되는데 시간이 오래걸림
• 장점

  • 1) 빠른 페이지 이동 (처음에 전체를 불러오기 때문)

  • 2) 서버에 데이터를 요청하는 횟수가 적음

    SEO (검색엔진최적화)

  • CSR은 검색엔진에 노출되기 힘들다.
    Why? 검색엔진이 (구글 제외) js script를 해석하기 어렵기 때문에 html을 크롤링하다보니
    CSR방식은 최초 렌더될 때, html이 nothing이므로 노출 순위에서 뒤로 밀림

SSR (server side rendering)

• 동작순서
  • 서버에서 브라우저로 html 응답을 보냄
    -> 브라우저는 페이지를 렌더링함 (페이지 최초 렌더)
    -> 브라우저가 js script를 다운받음
    -> 브라우저가 react를 실행함
    -> 페이지 렌더
• 단점
  • 1) 매번 페이지를 요청할 때마다 새로고침 되기 때문에 사용자 ux가 떨어짐
  • 2) 서버에 매번 요청을 하기 때문에 트래픽, 서버 부하가 커짐
• 장점
  • 1) 초기 로딩 속도가 빠름 따라서 사용자가 컨텐츠를 빨리 볼 수 있음
  • 2) 모든 검색엔진에 대한 seo가 가능 (현재는 구글만 js script를 읽고 있음)

SPA (single page application)

• 서버로부터 처음에만 페이지를 받아오고, 이후에는 (여기부터는 csr 영역 ->)동적으로 dom을 구성하여 렌더링되는 화면이 바뀌도록 하는 방식
• SPA는 CSR의 방식을 채택함

MPA (multiple page application)