SSR, CSR, SSG

SSR, CSR, SSG

• SSR, CSR, SSG 는 모두 렌더링 방식을 의미합니다.

Server Side Rendering (SSR)

• SSR 은 서버에서 사용자에게 보여줄 페이지를 모두 구성해서 사용자에게 페이지를 보여주는 방식입니다.
  SSR 을 사용하면 모든 데이터가 매핑된 서비스 페이지를 클라이언트에게 바로 보여줄 수 있습니다.
  서버를 통해 페이지를 구성하기 때문에, CSR 보다 페이지를 구성하는 속도는 느리지만, 전체적인 사용자에게 보여주는 콘텐츠의 양이 많아지면, CSR 보다 빠른 속도를 보여줄 수 있습니다.
  또 서버에서 첫 페이지를 서버에서 구성하기 때문에, 이미 완성된 페이지를 검색엔진이 수집할 수 있어서 검색 엔진 최적화(SEO)에 유리합니다.

서버 사이드 렌더링 (SSR) 의 장점

• SEO 에 유리합니다.
  • 검색엔진은 자바스크립트를 실행하지 않기 때문에, CSR 의 경우 검색엔진이 페이지를 제대로 수집하지 못할 수 있습니다.
  • SSR 은 서버에서 페이지를 렌더링 해주기 때문에, 검색엔진이 페이지를 제대로 수집할 수 있습니다.
• 콘텐츠가 많은 페이지의 경우, CSR 보다 빠른 속도를 보여줄 수 있습니다.
• 사용자가 페이지를 방문했을 때, 이미 완성된 페이지를 보여줄 수 있습니다.

서버 사이드 렌더링 (SSR) 의 단점

• 서버의 부하가 증가합니다.
  • 서버에서 페이지를 렌더링 해주기 때문에, 서버의 부하가 증가합니다.
• 초기 페이지 이후 페이지 전환 시, CSR 보다 느린 속도를 보여줄 수 있습니다.
  • 페이지 이동 시 마다 서버에서 데이터를 받아와서 렌더링 해주기 때문에, CSR 보다 느린 속도를 보여줄 수 있습니다.

Client Side Rendering (CSR)

• CSR 은 서버에서는 페이지의 틀만 보여주고, 클라이언트에서 필요한 데이터를 받아서 렌더링하는 방식입니다.
  처음 페이지를 방문하면, 모든 데이터를 받아와서 렌더링하기 때문에, 초기 페이지 로딩 시간이 길어질 수 있습니다.
  하지만, 페이지 이동 시, 페이지를 다시 불러오지 않고, 필요한 데이터만 받아와서 렌더링하기 때문에, 네이티브 앱과 같은 사용자 경험을 제공할 수 있습니다.
  또한, 검색엔진은 자바스크립트를 실행하지 않기 때문에, CSR 의 경우 검색엔진이 페이지를 제대로 수집하지 못할 수 있습니다.

CSR 장점

• 네이티브 앱과 같은 사용자 경험을 제공합니다.
  • CSR 은 페이지 이동 시, 페이지를 다시 불러오지 않고, 필요한 데이터만 받아와서 렌더링하기 때문에, 네이티브 앱과 같은 사용자 경험을 제공할 수 있습니다. (새로고침 없이 페이지 이동)
• 후속 페이지 로딩 시간이 더 빠릅니다.
  • 미리 데이터를 받아놓기 때문에 페이지 이동 시 빠른 속도를 보여줄 수 있습니다.

CSR 단점

• 초기 페이지 로딩 시간이 길어질 수 있습니다.
  • 처음 페이지를 방문하면, 모든 데이터를 받아와서 렌더링하기 때문에, 초기 페이지 로딩 시간이 길어질 수 있습니다.
• SEO 에 친화적이지 않습니다.
  • 검색 엔진은 자바스크립트를 실행하지 않기 때문에, CSR 의 경우 검색엔진이 페이지를 제대로 수집하지 못할 수 있습니다.

Static Site Generation (SSG)

• SSG 는 빌드 시점에 정적인 HTML 파일을 생성하는 방식입니다.
  Next.js, Nuxt.js, Gatsby.js 등의 프레임워크를 사용하면, SSG 를 쉽게 구현할 수 있습니다.
  미리 만들어 둔 HTML 파일을 브라우저에 전달하기 때문에, 초기 페이지 로딩 시간이 빠릅니다.
  또 완성된 HTML 파일을 검색엔진이 수집하기 때문에, SEO 에 친화적입니다.

SSG 장점

• 빌드 시점에 HTML 파일을 생성하기 때문에 초기 페이지 로딩 시간이 빠릅니다.
  • 미리 만들어 둔 HTML 파일을 브라우저에 전달하기 때문에, 초기 페이지 로딩 시간이 빠릅니다.
• SEO 에 친화적입니다.
  • 완성된 HTML 파일을 검색엔진이 수집하기 때문에, SEO 에 친화적입니다.

Reference

• CSR vs SSR vs SSG