[기초] CSR&SSR, SPA&MPA

✓ 페이지 구성 방식 ⇒ 렌더링 방식

• SPA(Single Page Application) ⇒ CSR
  • ajax가 등장하면서 원하는 부분만 클라이언트에서 동적으로 갈아끼울 수 있고 화면 깜빡임도 없는 SPA를 사용하게 됨
  • react, angular, vue
• MPA(Multi Page Application) ⇒ SSR
  • php, jsp

1️⃣ CSR(Client Side Rendering)

• 초기 로딩 속도가 느리지만,이후 구동 속도는 빠름
• 빈 뼈대만 가지고 있기 때문에 SEO에 불리
• Googlebot은 JS 읽을 줄 앎 ⇒ 하지만 완벽하지 않음
• 장단점
  • 장점
    • 화면 깜빡임이 없음
    • 초기 로딩 이후 구동 속도가 빠름
    • TTV와 TTI 사이 간극이 없음(사용자가 보는 시점과 사용자가 이용할 수 있는 시점 같음)
    • 서버 부하 분산
  • 단점
    • 초기 로딩 속도 느림
    • SEO에 불리함
• 단점 보완
  • code splitting, tree-shaking, chunk 분리 ⇒ JS 번들 크기를 줄여서 초기 로딩 속도 보완
  • pre-rendering(라이브러리, 웹팩을 통해 미리 생성) ⇒ SEO개선
  • SSR과 SSG 도입
    • 프레임워크 없이 하는 방법 ⇒ node.js express nest 등을 활용 → 진입장벽이 있음
    • 프레임워크 사용 ⇒ CSR에 비해 코드 복잡도↑, 블랙박스 영역 존재
      • react ⇒ next.js(페이지별로 SSR, SSG선택 가능), Gatsby(SSG에 최적화, 다양한 플러그인)
      • angular ⇒ universal(Angular4부터 코어 모듈에 포함)
      • vue ⇒ Nuxt(Next.js에 영감을 받았음)

2️⃣ SSR (Server Side Rendering)

• 요청할 때, 즉시 만드니까 데이터가 자주 바뀌어서 미리 만들어 두기 어려운 페이지에 적합
• SEO에 유리
• 초기 구동 속도가 빠름, 하지만 JS 로직이 모두 연결될 때까지 사용자의 반응을 입력받지 못 함
• 장단점
  • 장점
    • 초기 구동 속도가 빠름
    • SEO에 유리함
  • 단점
    • 화면 깜빡임이 있음
    • TTV와 TTI 사이 간극이 있음
    • 서버 부하가 있음

3️⃣ SSG (Static Site Rentering)

• 요청할 때, 페이지를 응답하니까 페이지들을 서버에 모두 만들어둔 후 바뀔 일이 거의 없는 페이지에 적합

4️⃣ CSR + SSR ⇒ Isomorphic App, Universal Rendering

• 서버와 클라이언트에서 모두 같은 코드로 돌아감
• 초기 로딩 속도 보완
• SEO 개선
• CSR의 장점

✓ 무엇을 사용해야 할까?

• 유저랑 상호작용이 많음, 대부분 고객 개인 정보로 이루어진 페이지 ⇒ CSR
• 회사 홈페이지, 누구에게나 항상 같은 내용, 매주 업데이트 함 ⇒ SSR
• 회사 홈페이지, 누구에게나 항상 같은 내용, 업데이트 거의 안함 ⇒ SSG
• 사용자에 따라 페이지 내용이 다름, 빠른 인터랙션이 중요, 상위 노출되면 좋음 ⇒ CSR+SSR

참고 영상