CSR

  • 클라이언트 사이드 렌더링 (CSR): 클라이언트 측에서 페이지 렌더링을 수행하는 방식이다.

  • 사용자의 브라우저에서 Javascript를 사용해 페이지를 동적으로 생성해준다.

  • 서버는 빈 HTML 페이지만 제공하고 이후 데이터와 페이지를 렌더링하는 역할은 클라이언트가 수행한다.

작동방식

  1. 사용자가 새로운 사이트를 요청하면,
  2. 서버에서 빈 HTML 파일을 제공해주고,
  3. 브라우저가 JS파일을 다운로드한다.
  4. 이후 브라우저가 JS실행을 함

SSR

  • 서버 사이드 렌더링(SSR): 서버에서 페이지를 미리 생성한뒤, 사용자에게 페이지를 렌더링 하는 방식
  • 사용자가 페이지에 접속할 때 서버에서 미리 HTML을 생성하고 클라이언트로 보낸다.
  • 사용자에게 초기 내용을 빠르게 표시하고 검색 엔진 최적화(SEO)를 개선하는데 도움을 준다.

작동방식

  1. 사용자가 새로운 사이트를 요청한다.
  2. 서버에서 미리 생성된 HTML 파일을 제공함
  3. 브라우저가 JS파일을 다운로드하면
  4. 브라우저가 JS를 실행한다.

SSG

  • 정적 사이트 생성(SSG): 페이지를 사전에 빌드 시점에서 생성하고 정적 파일로 제공하는 방식이다.
  • default가 Next.js는 SSG방식으로 데이터를 페칭한다.
  • 초기 로딩 속도가 빠르고 SEO가 우수하다.
  • 미리 빌드된 페이지를 제공하므로 서버 부하가 낮다.
  • 동적 콘텐츠에는 제한이있다.