[Next.js] Pre-rendering

• 기본적으로 Next.js는 모든 페이지를 미리 렌더링함
• 다시 말해 Next.js는 client-side JavaScript에서 모든 작업을 수행하는 대신 각 페이지의 HTML를 미리 생성한다.
• 미리 렌더링함으로 성능과 SEO를 개선할 수 있다.
• 생성된 각 HTML은 해당 페이지에 필요한 최소의 JavaScript 코드와 연결된다.
• 브라우저에서 페이지를 로드하면 JavaScript 코드가 실행되고 페이지가 완전히 상호 작용할 수 있게 된다.(이 과정을 Hydration 이라고 함)

---

Two forms of Pre-rendering

• Next.js 는 두 가지 형태의 Pre-Rendering 방식이 있는데 해당 페이지의 HTML을 생성하는 시점에서 그 차이가 있다.
• 1) Static Generation (권장)
• 2) Server-side Rendering

Static Generation

• 빌드타임 에 HTML이 생성되고 각 요청시 재사용됨
• 성능상의 이유로 Server-side Rendering 보다 Static Generation을 사용할 것을 권장함
• 정적으로 생성된 페이지는 성능 향상을 위한 추가 설정 없이 CDN에 의해 캐시될 수 있다.
• 예) 마케팅 페이지, 블로그 포스트, 포트폴리오, 이커머스 상품 리스트, 도움말 및 문서 등
• getStaticProps(), getStaticPaths()

getStaticPaths() - fallback

// result in a 404 page
export async function getStaticPaths() {
	...
	return { paths, fallback: false }
}

// build time 초기화시 없는 path 경우 getStaticPaths() 호출됨
// 같은 path로 재요청의 경우 실행 X
// 로딩 상태값 보여줄 수 있음
{
	...
    // loading state
	const router = useRouter();

  	if (router.isFallback) {
      	// fallback = true 시, 접속한 페이지를 생성할 때 보여주는 페이지
    	return <div>Loading...</div>;    	
  	}

	export async function getStaticPaths() {
  		...
   		return { paths, fallback: true } 
	}
}

// build time 초기화시 없는 path 경우 getStaticPaths() 호출됨
// 같은 path로 재요청의 경우 실행 X
// 로딩 상태값 X, 브라우저가 서버 사이드 렌더링에서 HTML 생성을 기다림
export async function getStaticPaths() {
  ...
   return { paths, fallback: 'blocking' } 
}

How does getStaticProps run with regards to getStaticPaths

Server-side Rendering

• 매번 요청 할 때마다 HTML 이 생성됨
• Static Generation이 권장되나 Server-side Rendering 을 사용해야만 하는 경우도 있다.
• 예) 자주 데이터가 업데이트 되는 경우나 모든 요청마다 컨텐츠가 변경되는 경우
• getServerSideProps()

Client-side data fetching

• Static Generation와 Server-side Rendering 과 함께 클라이언트 측에서 데이터를 가져올 수 있다.
  => 페이지의 일부는 클라이언트 측의 JavaScript로 완전히 렌더링될 수 있다는 뜻

[참조]

Pre-rendering