Pre-Rendering
Data Fetching에 대해 이야기하기 전에 Next.js의 가장 중요한 개념중 하나인 Pre-rendering에 대해 이야기를 해보겠습니다.
기본적으로 Next.js는 모든 페이지를 미리 렌더링합니다. 이는 Next.js가 클라이언트 측 JavaScript로 모든 작업을 수행하는 대신 각 페이지에 대해 미리 HTML을 생성한다는 것을 의미합니다. 사전 렌더링을 통해 성능과 SEO가 향상될 수 있습니다 .
즉, 자바스크립트를 실행하기 전, 미리 HTML을 생성하기 때문에 검색엔진(구글 등)에서 웹사이트를 크롤링함에 있어서 웹사이트에 대한 정보를 가져오기가 수월하다는 의미이다.
생성된 각 HTML은 해당 페이지에 필요한 최소한의 JS코드와 연결됩니다. 브라우저가 페이지를 로드하면 해당 JS코드가 실행되어 페이지가 완전히 대화형으로 만들어집니다.
Pre-Rendering(with Next.js)
No Pre-Rendering(Plain React.js app)
Pre-Rendering의 두가지 형태
Next.js에는 Static Generation과 Server-side Rendering이 있습니다. 두 렌더링의 차이는 페이지의 HTML을 생성하는 시점에 있습니다.
Static Generation
Server-side Rendering
즉, 어떤 페이지에 대한 요청이 들어오는 시점(SSR)인가, 혹은 작성한 코드를 빌드하는 시점(static generation)인가 하는 차이점이 있습니다. Next는 기본적으로 정적생성을 권장하고 있습니다.
npm run dev로 개발모드를 실행한느 경우 모든 요청에 대해 페이지가 Pre-Rendering됩니다. 이는 개발을 더 쉽게하기 위해 Static Genration에도 적용됩니다. 프로덕션 단계에서 Static생성은 모든 요청이 아닌 빌드 시에 한 번만 실행됩니다.
중요한 것은 Next.js를 사용하면 각 페이지에 사용할 Pre-Rendering을 선택할 수 있다는 것입니다. 대부분의 페이지에는 Static생성을 사용하고, 다른 페이지에서는 SSR을 사용하여 "하이브리드" Next.js앱을 만들 수 있습니다.
페이지가 한 번 구축되고 CDN에 의해 제공될 수 있으므로 가능하면 Static생성을 사용하는 것이 좋습니다.
이는 서버가 모든 요청에 대해 페이지를 렌더링하도록 하는 것보다 훨씬 빠릅니다.
다음 유형에 해당되는 경우 Static Generation을 선택할 수 있습니다.
- 마게팅 페이지
- 블로그 게시물
- 전자상거래 제품 목록
- 도움말 문서
"사용자의 요청에 앞어 이 페이지를 미리 렌더링할 수 있나요?"의 대답이 "예"라면 Static Generation을 선택해야 합니다.
반면에 사용자 요청에 앞서 페이지를 미리 렌더링할 수 없다면 정적생성은 좋은 생각이 아닙니다. 페이지에 자주 업데이트되는 데이터가 표시되고 요청이 있을 때마다 페이지 컨텐츠가 변경될 수 있습니다.
이 경우 SSR을 사용할 수 있습니다. 속도는 느려지지만 사전 렌더링된 페이지는 항상 최신 상태로 유지됩니다. 또는 사전 렌더링을 건너뛰고 클라이언트 측 JS를 사용하여 자주 업데이트되는 데이터를 채울 수 있씁니다.
Static Genertaion
기본적으로 page에서 외부 데이터를 가져올 때 사용됩니다. 예를들어 블로그에서 CMS에 작성한 글을 불러올때 처럼 말이죠.
Static Generation은 데이터 유무에 관계없이 수행될 수 있습니다.
지금까지 우리가 만든 모든 페이지에는 외부 데이터를 가져올 필요가 없습니다. 이러한 페이지는 앱이 프로덕션용으로 빌드될 때 자동으로 Static으로 생성됩니다.
그러나 일부 페이지의 경우 일부 외부 데이터를 먼저 가져오지 않으면 HTML을 렌더링하지 못할 수도 있습니다. 파일 시스템에 액세스하거나, 외부 API를 가져오거나, 빌드 시 데이터베이스를 쿼리해야 할 수도 있습니다. Next.js는 이 경우( 데이터를 사용한 정적 생성 )를 기본적으로 지원합니다.
getStaticProps를 사용한 데이터를 사용한 Static Generation
Next.js에서는 페이지 컴포넌트를 export할때 getStaticProps라는 async함수도 내보낼 수 있씁니다.
- 프로덕션에서는 getStaticProps가 빌드타임에 실행됩니다
- 함수 내에서 외부 데이터를 가져와 페이지에 props로 보낼 수 있습니다.
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: ...
}
}