클라이언트 사이드 렌더링(CSR)과 서버 사이드 렌더링(SSR)의 개념에 대해 설명해주시고, 장/단점을 설명해주세요.

클라이언트 사이드 렌더링(CSR)과 서버 사이드 렌더링(SSR)은 웹 페이지를 구성하는 방식의 차이를 나타냅니다.

클라이언트 사이드 렌더링 (CSR)

• 개념: CSR에서는 브라우저에서 HTML을 직접 렌더링합니다. JavaScript가 브라우저에서 실행되어 페이지를 구성하며, 초기 로드 후 추가 데이터는 AJAX 요청을 통해 받습니다.
• 장점:
  1. 사용자와의 상호작용이 빠르고 매끄럽습니다.
  2. 서버 부하가 적으며, 캐싱이 용이합니다.
• 단점:
  1. 초기 로딩 속도가 느릴 수 있습니다.
  2. 검색 엔진 최적화(SEO)가 어려울 수 있습니다.

서버 사이드 렌더링 (SSR)

• 개념: SSR에서는 서버에서 HTML을 렌더링하고 완성된 페이지를 클라이언트로 전송합니다. 클라이언트는 렌더링된 HTML을 받아 브라우저에서 표시합니다.
• 장점:
  1. 초기 로딩 속도가 빠릅니다.
  2. SEO에 유리합니다.
  3. JavaScript를 지원하지 않는 환경에서도 페이지가 표시됩니다.
• 단점:
  1. 서버에 부하가 더 많이 가해질 수 있습니다.
  2. 사용자와의 상호작용이 CSR에 비해 다소 느릴 수 있습니다.

요약

• CSR은 브라우저에서 동적 렌더링으로 상호작용이 좋지만 초기 로딩과 SEO 문제가 있을 수 있습니다.
• SSR은 초기 로딩과 SEO에 유리하나, 서버 부하와 사용자 상호작용에서 CSR보다 느릴 수 있습니다.

포인트

아마 nextjs를 왜 사용했냐는 질문에 주니어분들이 대부분 ssr/csr때문에 사용했다고 잘못대답하는 경우가 많고, 애초에 왜 사용해야 하는지도 모른다.

이걸 잘 명심하고 두 개념을 설명할 것

면접에서 할 대답

클라이언트 사이드 렌더링(CSR)은 브라우저에서 HTML 렌더링, 상호작용이 좋으나 초기 로딩과 SEO가 어려울 수 있습니다.
서버 사이드 렌더링(SSR)은 서버에서 HTML 렌더링, 초기 로딩과 SEO에 유리하나 서버 부하와 상호작용이 느릴 수 있습니다.
CSR 장점: 상호작용 빠름, 서버 부하 적음.
CSR 단점: 초기 로딩 느림, SEO 어려움.
SSR 장점: 초기 로딩 빠름, SEO 유리.
SSR 단점: 서버 부하 많음, 상호작용 느림.