SSR & CSR에 대한 설명 및 주요 차이점

SSR(Server Side Rendering)

서버쪽에서 렌더링 준비를 끝마친 상태로 클라이언트에 전달하는 방식

SSR에서 서버는 HTML을 생성하여 클라이언트의 브라우저로 보낸 다음 페이지를 렌더링합니다.
이 접근 방식은 일반적으로 서버에서 생성된 HTML이 검색 엔진에 의해 인덱싱될 수 있으므로 보다 SEO 친화적인 것으로 간주됩니다.
또한 SSR을 사용하면 브라우저가 콘텐츠를 표시하기 전에 JavaScript가 실행될 때까지 기다릴 필요가 없으므로 초기 로드 시간이 더 빨라집니다.

SEO란? : 검색자 (검색 유저)의 의도를 이해하고 이에 충실히 맞춰 웹 페이지의 콘텐츠를 제작하는 과정

CSR(Client Side Rendering)

서버는 요청을 받으면 클라이언트에 HTML과 JS를 보내준다. 클라이언트는 그것을 받아 렌더링을 시작

CSR에서 브라우저는 JavaScript 번들을 다운로드하고 실행하여 페이지의 HTML을 생성합니다.
이 접근 방식을 사용하면 JavaScript가 콘텐츠를 실시간으로 업데이트할 수 있으므로 보다 동적이고 상호 작용하는 웹 페이지가 가능합니다.
그러나 이 접근 방식은 검색 엔진이 JavaScript에서 생성된 콘텐츠를 색인화하지 못할 수 있으므로 SEO 친화적이지 않을 수 있습니다.
또한 CSR은 콘텐츠를 표시하기 전에 JavaScript가 실행될 때까지 브라우저가 기다려야 하므로 초기 로드 시간이 느릴 수 있습니다.

SSR & CSR은 언제 사용하면 좋을까?

• SSR을 사용하면 좋은 경우

  1. 웹사이트가 SEO 친화적일 경우
  2. 자주 변경되지 않는 정적 콘텐츠가 많이 있을 경우
  3. JavaScript가 비활성화된 사용자가 웹 사이트에 액세스할 경우
     • SSR은 서버에 전체 HTML을 생성하므로 JavaScript를 사용할 수 없는 경우에도 렌더링할 수 있다.
  4. 렌더링 작업의 일부를 서버로 오프로드하여 웹 응용프로그램의 성능과 보안을 개선하고자할 경우

• CSR을 사용하면 좋은 경우

  1. 웹 사이트에는 많은 사용자 상호 작용과 동적 업데이트가 필요할 경우
  2. 웹 사이트가 가볍고 빠르길 원할 경우
  3. 웹 사이트가 SPA(단일 페이지 응용 프로그램)이며 클라이언트 측 라우팅을 처리해야할 경우
  4. 오프라인에서 작동할 수 있는 웹 응용프로그램을 빌드하려고할 경우