CSR(Client Side Rendering)

• 렌더링 하는 주체가자 클라이언트(브라우저)

  • 즉, 브라우저에 표기하기 위한 모든 코드들을 클라이언트 측에 다운 받아서 코드를 실행하고 분석해서 표기하고 분석.
  • 리액트 라이브러리를 이용하는 경우.

• 장점

  • 한번 로딩 되면, 빠른 UX제공
  • 서버에 부하가 작음

• 단점

  • 페이지 로딩 시간(TTV: time to view)이 길다.
  • = FCP(First Contentful Paint)가 길다.
  • 자바스크립트 활성화가 필수임.
  • SEO 최적화가 힘듬
  • 보안에 취약함.
  • CDN에 캐시가 안됨.

  ⇒ 이런 문제점을 해결하기 위해서 나온 것이 바로 SSG, SSR

SSG(Static Site Generation)

• 렌더링 하는 주체자가 서버, 언제 렌더링? 빌드할 때 렌더링.

• 장점

  • 페이지 로딩 시간(TTV:time to view)이 빠름
  • 자바스크립트 필요 없음.
  • SEO 최적화가 좋음
  • 보안이 뛰어남
  • CDN 캐시가 됨

• 문제점

  • 데이터가 정적임
    • 데이터가 잘 바뀌지 않는 웹사이트에는 적절할 수 있으나, 데이터가 잘 바뀌는 웹 사이트에는 적절하지 않음
  • 사용자별 정보 제공이 어려움
    • 빌드할 때 사용자 정보를 제공하기 때문에

  ⇒ 이런 문제점을 해결하기 위해 나온 것이 바로 ISR, SSR

ISR(Incremental Static Regeneration)

• 렌더링 하는 주체자가 서버, 언제 렌더링? 주기적으로 렌더링.

  • 우리가 설정한 주기만큼 계속해서 페이지를 다시 만들어줌.
  • 기본적으로는 SSG와 동일한 원리이지만 정해진 주기에 따라 페이지를 다시 생성한다는 점이 다름.

• 장점

  • 페이지 로딩 시간(TTV:time to view)이 빠름
  • 자바스크립트 필요 없음.
  • SEO 최적화가 좋음
  • 보안이 뛰어남
  • CDN 캐시가 됨
  • 데이터가 주기적으로 업데이트 됨.

• 단점

  • 주기적이긴 하지만 실시간 데이터가 아님.
  • 사용자별 정보 제공이 어려움

  ⇒ 이런 문제점을 해결하기 위해 나온 것이 바로 SSR

SSR(Server Side Rendering)

• 렌더링 하는 주체자가 서버, 언제 렌더링? 요청시 렌더링.
• 장덤
  • 페이지 로딩시간(TTV: time to view)이 빠름
  • 자바스크립트 필요 없음
  • SEO 최적화가 좋음
  • 보안이 뛰어남
  • 실시간 데이터를 사용!
  • 사용자별 필요한 데이터를 사용함!
• 단점
  • 비교적 느릴 수 있음
  • 서버에 과부하가 걸릴 수 있음(overhead)
  • CDN에 캐시가 안됨.