❗️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)
렌더링 주체: 서버
: 설정한 주기만큼 페이지를 계속 생성