1. 질문 & 답변 & 토의

[Q. SSR → CSR 등장 배경은 무엇인가요?]

• SSR 문제 → CSR 어떤 컨셉으로 해결 가능했기 때문에 등장

  • SSR은 server에서 렌더링 담당, CSR은 client에서 렌더링 담당하는 차이
  • SSR문제: ‘server에서 완성된(js가 실행된) html탬플릿을 받아오기 때문에 깜빡임 현상이 불가피하다. (ux 안좋음)
  • CSR
    • 준혁: 사용자와 동적으로 상호작용이 가능하고, 새로고침 없이 데이터를 동적으로 변경이 가능
    • CSR은 모든 HTML 파일과 static 파일을 초기에 모두 다운로드 받고, 이후 필요한 리소스가 있을 때만 서버에 데이터를 요청하여 화면을 업데이트 한다.
      • 따라서 필요한 부분만 업데이트하기 때문에, 새로고침이 없이 데이터 변경이 가능합니다.

  꼬리질문

  [Q. CSR의 단점과 극복방법은? ]

  • SSR + CSR
    • ~~문제가 있었다 두괄식 위력으로.. → 어떤식으로 두괄식으로 습관이 안 되어있다..
    • Time To View / Time To Interact를 말하고 싶으셨던 것 같은 준혁넴

From gitHub (링크)

1. SPA와 MPA에 대해서 각각 설명해주세요.

MPA(Multi-page Application) 두 개 이상의 페이지로 구성된 애플리케이션을 의미한다. 사용자의 클릭과 같이 인터렉션이 발생할 때마다 해당 링크로 이동하여 앱이 다시 새로고침되는 방식으로 작동한다. 랜더링 방식으로 서버사이드 랜더링을 채택한다.

SPA(Single-page Application) 하나의 페이지로 구성된 애플리케이션을 의미한다. 렌더링 방식으로 CSR을 채택한다. Angular, React, Vue 에서 적용되었다.

2. SSR (Server Side Rendering) 과 CSR (Client Side Rendering)을 각각 설명해주세요.

SSR 서버로부터 완전하게 만들어진 html 파일을 받아와 페이지 전체를 렌더링하는 방식

장점

1. SEO(검색 엔진 최적화)에 유리 : 화면을 구성하는 각각의 페이지가 있기 때문에 SEO에 유리하다.
2. 빠른 초기 로딩 속도 : 서버로부터 화면을 렌더하기 위한 필수적인 요소를 먼저 가져오기 때문에 CSR 보다 초기 로딩 속도가 빠르다.

단점

1. 불편한 사용자 경험 : 매번 페이지를 요청할 때마다 새로고침
2. 서버 부하 증가 : 페이지를 요청할 때마다 서버에서 모든 리소스를 응답하기 때문에 서버 부담이 증가됨

CSR 사용자의 요청에 따라 필요한 부분만 렌더링하는 방식

장점

1. 빠른 속도 및 서버 부하 감소 : 변경된 부분과 관련된 데이터만 가져옴
2. 사용자 친화적 : 페이지 안의 컨텐츠를 클릭하여 다음 단계로 전환하는 과정에서 링크가 없어서 깜빡임 없이 부드러운 이동을 경험할 수 있다.