SSG -> Static Generation
SSR -> Server-side Rendering
Data Fetching 대해 이야기하기 전에 Next.js : Pre-rendering에서 가장 중요한 개념 중 하나에 대해 이야기 해 봅시다.
기본적으로 Next.js는 모든 페이지를 미리 렌더링합니다. 즉, Next.js는 클라이언트 측 JavaScript로 모든 작업을 수행하는 대신 사전에 각 페이지에 대해 HTML을 생성합니다. 이는 더 나은 성능의 SEO 결과로 나타납니다.
생성 된 각 HTML은 해당 페이지에 필요한 최소한의 JavaScript 코드와 연결됩니다. 페이지가 브라우저에 의해로드되면 JavaScript 코드가 실행되어 페이지가 완전히 상호 작용하게됩니다. (이 과정을 Hydration이라고합니다.)
Pre-rendring
<Link />
와 같이 상호작용 가능한 컴포넌트가 있다면 JS가 로드된 후 상호작용이 가능해집니다.No Pre-rendering
Next.js는 Static Generation(정적생성) 과 Server-side Rendering(서버측 렌더링)의 두가지 형태의 pre-rendering 방식을 가집니다. 두 방식의 차이점은 언제 HTML 페이지가 생성되느냐에 있습니다.
Static Generation
- HTML이 빌드 시 생성됩니다. 그리고 생성된 HTML은 각 요청시 재사용되어집니다.
Server-side Rendering
- HTML이 각 요청마다 생성됩니다.
개발 모드(npm run dev 또는 yarn dev 실행 시)에서는 모든 요청에 대해 페이지가 미리 렌더링됩니다. 이는 정적 생성에도 적용되어 개발이 쉬워집니다. 프로덕션으로 이동할 때 정적 생성은 모든 요청이 아닌 빌드 시간에 한 번 발생합니다.
중요한 것은 Next.js를 사용하여 각 페이지에 사용할 사전 렌더링 양식을 선택할 수 있다는 것입니다. 대부분의 페이지에서 정적 생성을 사용하고 다른 페이지에서는 서버 측 렌더링을 사용하여 "하이브리드" Next.js 앱을 만들 수 있습니다
가능하면 Static Generation(데이터가 있든 없든)을 사용하는 것이 좋습니다. 왜냐하면 페이지는 한 번 작성되고 CDN에 의해 제공되므로 모든 요청에 대해 서버가 페이지를 렌더링하는 것보다 훨씬 더 빠르기 때문입니다.
다음을 포함하여 여러 유형의 페이지에 대해 정적 생성을 사용할 수 있습니다.
"사용자의 요청보다 먼저 이 페이지를 미리 렌더링할 수 있는가?" 만약 대답이 '예'라면, Static Generation을 선택해야 합니다. 반면에, Static Generation은 사용자의 요청보다 먼저 페이지를 미리 렌더링할 수 없는 경우에는 좋은 생각이 아닙니다. 페이지에 자주 업데이트되는 데이터가 표시되고 모든 요청에 따라 페이지 내용이 변경될 수 있습니다. 이 경우 Server-side Rendering을 사용할 수 있습니다. 느려지지만 미리 렌더링된 페이지는 항상 최신 상태입니다. 또는 Pre-rendering을 건너뛰고 클라이언트 측 JavaScript를 사용하여 자주 업데이트되는 데이터를 채울 수 있습니다.
Static Generation 방식은 데이터를 사용하거나 사용하지 않고 수행할 수 있습니다. 이러한 페이지는 앱이 제작을 위해 제작될 때 자동으로 정적으로 생성됩니다.
그러나 일부 페이지의 경우 먼저 외부 데이터를 가져오지 않고 HTML을 렌더링할 수 없습니다. 파일 시스템에 액세스하거나 외부 API를 가져오거나 빌드 시 데이터베이스를 쿼리해야 할 수 있습니다. Next.js는 이 경우(데이터가 포함된 정적 생성)를 즉시 지원합니다.
데이터가 있는 Static Generation
- 외부 데이터를 가져올 수 있는 페이지들은 빌드시 생성됩니다. (외부 데이터를 받고 난 후)
getStaticProps를 이용한 데이터가 있는 정적 생성
어떻게 작동하나요? Next.js에서는 페이지 구성 요소를 내보낼 때 getStaticProps라는 비동기 함수도 내보낼 수 있습니다. 이렇게 하면 다음과 같습니다:
export default function Home(props) { ... }
export async function getStaticProps() {
// Get external data from the file system, API, DB, etc.
const data = ...
// The value of the `props` key will be
// passed to the `Home` component
return {
props: ...
}
}
기본적으로 getStaticProps를 사용하면 Next.js에게 다음과 같이 말할 수 있습니다: "이 페이지에는 몇 가지 데이터 종속성이 있습니다. 따라서 빌드 시 이 페이지를 미리 렌더링할 때 먼저 그 데이터들을 먼저 resolve 하세요!"
참고: 개발 모드에서 getStaticProps는 각 요청에서 대신 실행됩니다.