TIL 51. 2024-03-12

❗️next.js 기능❗️

1. 다양한 렌더링 기법이 존재

-SSG, ISR , SSR, CSR

• 1-1) CSR (Clinet side Rendering)
  렌더링 주체: 클라이언트
  장점: 최초 한번 로드가 끝난 시점을 기준으로 사용자와의 상호작용이 빠르고 부드럽다.
  한계: 브라우저에서 정적(html, css)인 요소와 동적(js)요소를 모두 가져온 상태어야만 작동한다.
  : TTV가 저하, 초기 로딩 속도⬇️

  CSR의 한계를 극복하기 위해 등장한 기법: Code Spilitting

• 1-2) SSR (Server side Rendering)
  렌더링 주체: 서버
  장점)
  pre-rendering : 빌드 시점에서 서버를 통해 모든 페이지를 미리 생성
  클라이언트의 요청 시 페이지를 새로 그려 사용자에게 제공합니다.

• 1-3) SSG (Static Site Generation)
  렌더링 주체: 서버
  : 서버에서 페이지를 렌더링하여 클라이언트에게 HTML을 전달하는 방식
  : 최초 빌드시에만 생성❗️
  장점: 첫 페이지 로딩 시간이 매우 짧아(TTV) 사용자가 빠르게 페이지를 볼 수 있습니다. 또한, SEO에 유리하다.
  단점: 빌드 이후에 변경한 정적인 데이터는 표시되지 않으므로 리빌드 해줘야한다.
• 정적인 데이터에만 사용할 수 있음
• 사용자와의 상호작용이 서버와의 통신에 의존하므로, CSR보다 상호작용이 느릴 수 있습니다. 또한, 서버 부하가 클 수 있습니다.
• 마이페이지 처럼 데이터에 의존하여 화면을 그려주는 경우 사용 불가

build: 소스코드를 실행 가능한 상태로 만들어 놓은 과정/ vercel에 배포하기 위해 내부적으로 build를 하는 과정

• 1-4) ISR(Incremental Static Regeneration)
  렌더링 주체: 서버
  : 설정한 주기만큼 페이지를 계속 생성