프리 렌더링

기본적으로 Next.js는 모든 페이지를 미리 렌더링한다. 이는 각 페이지에 대해 미리 HTML을 생성한다는 것을 의미하는데 이를 통해 성능과 SEO가 향상될 수 있다.

CSR vs Pre-rendering

CSR - 초기 문서가 비어 있다가 클라이언트 측에서 서버로부터 받은 자바스크립트 파일을 사용하여 렌더링을 완료하면 화면을 볼 수 있다.

Next.js Pre-rendering - 미리 서버에서 특정 페이지의 컴포넌트를 렌더링한 후 HTML을 전달하여 사용자에게 보여준다. 이후 Hydration을 통해 동적 UI로 기능한다.

프리 렌더링의 종류

Static Site Generation(SSG) - 빌드타임 때 HTML을 미리 생성한다. 프리 렌더링된 HTML이 각 요청에 재사용된다.

Server Side Rendering(SSR) - 각 요청마다 런타임 때 HTML을 생성하여 사용한다.

Build Time과 Run Time

Build Time

프로덕션용 애플리케이션 코드를 준비하는 일련의 단계에 부여되는 이름. 애플리케이션을 빌드하면 Next.js는 코드를 서버에 배포 하고 사용자가 사용할 수 있도록 프로덕션에 최적화된 파일로 변환. 이러한 파일에는 다음이 포함된다.

Run Time

애플리케이션이 구축되고 배포된 후 사용자의 요청에 대한 응답으로 애플리케이션이 실행되는 기간