기술문제 면접(CSR과 SSR의 개념적 차이와 동작 방식을 구분하여 설명해주세요.)

SPA

CSR과 SSR의 개념적 차이와 동작 방식을 구분하여 설명해주세요.

CSR(client side rendering)

• 브라우저에서 렌더링 진행
  (렌더링_컴퓨터 그래픽상의 처리 과정)
• 최초 로딩 시 브라우저가 서버에서 html, css, javascript등 각종 리소스들을 받아온다.
• 초기 로딩 속도가 느리다.
• SSR에 비해 페이지 전환 속도가 빠르다.
• 서버 요청 횟수가 적어서 서버에 대한 부담이 비교적 적다.
• 초기 데이터가 없기때문에 크롤러가 데이터를 수집하기에 부적합하다.
• 처음에는 HTML이 비어있어 SEO문제가 발생하게 된다.
  쿠키나 localstorage에서 사용자 정보를 저장해야 되기때문에 XSS공격에 취약하다.

  XSS(Cross-Site Scripting)
  웹 애플리케이션에서 일어나는 취약점으로 관리자가 아닌 권한이 없는 사용자가 웹 사이트에 스크립트를 삽입하는 공격 기법

• react에서는 이러한 단점을 극복하기 위하여 ReactSSR라이브러리인 Next.js를 사용한다고 함

SSR(server side rendering)

• 서버에서 렌더링 진행
• 서버에서 렌더링 후 완전하게 만들어진 HTML 파일을 브라우저로 전달 후 출력
• HTML의 최초 로딩 속도가 빠르다.
• 초기 데이터를 수집하고 있어 크롤러가 데이터를 수집하기에 알맞으며 SEO에 적합하다.
  (SEO_검색 엔진 최적화)
• 페이지 전환시 매번 요청을 하기 때문에 서버에 부담을 준다.