Next.js 공식문서 읽기
📍프리렌더링이란?
⭐모든 HTML 페이지를 미리 생성 (client-side에서 JavaScript로 만들지 않음)
- 페이지가 브라우저에 의해 로드되면, 각각의 HTML 페이지는 최소한의 JavaScript 코드를 보유
- 이후 이 코드가 수행되며 페이지를 완전하게 만듬
(이것이 Hydration 과정)
⭐프리 렌더링은 성능과 SEO 측면에서 유리
📍프리렌더링 이루어지는 것 확인하기
React (CRA 환경) 페이지 vs Next.js 환경의 페이지 비교
1️⃣두 페이지에 접속하여 JavaScript 비활성화
- 크롬 개발자도구 열기
- crtl + shift + p
- javascript 검색하여 Disable JavaScript 클릭
2️⃣결과 확인
- CRA 페이지는 "You need to enable JavaScript to run this app." 문구 출력 (HTML 페이지)
- 반면 Next.js 페이지는 정상적으로 렌더링
3️⃣즉, Next.js는 정적 HTML을 프리 렌더링하는 것을 알 수 있다
📍프리렌더링의 2가지 형태
1. Static Generation
2. Server-side Rendering
1️⃣Static Generation
- 빌드 타임에 프리렌더링 수행
- 프리 렌더된 HTML이 각 요청 때마다 재사용됨
2️⃣Server-side Rendering
- 각 요청에 응답으로 프리렌더링 수행
이 두 가지를 hybrid 방식으로 혼용할 수 있다
📍이 2가지는 언제 사용해야 할까?
⭐Next.js에서 공식적으로 권장하는 방법은 Static Generation (데이터 유무와 관계없이)
그 이유는
- 페이지를 빌드하여 CDN으로 제공하기 때문에 SSR보다 훨씬 빠름
반면, SG를 사용하기 어려운 경우도 있다
- 유저의 요청에 앞서 프리렌더링 하기 어려운 경우
예) 실시간으로 업데이트되는 페이지, 매 요청마다 다른 데이터를 제공해야 하는 페이지 등
- 이러한 경우 조금 느려도 SSR을 사용하는 것이 낫다 (또는 프리렌더링을 생략하고 CSR 사용)
📍SG with Data using getStaticProps 비동기 함수
- 페이지 컴포넌트를 export 할 때 getStaticProps 비동기 함수도 같이 export 한다
그렇게 되면...
- production 빌드타임에 getStaticProps 가 동작하고, 외부 데이터를 fetch하거나 해서 페이지의 컴포넌트 props로 전달할 수 있다
예시) Home 컴포넌트가 getStaticProps 함수를 사용하여 데이터 의존성이 있으므로, 프리렌더링 전에 resolve 필요
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: ...
}
}
- development 환경에서는 getStaticProps가 매 요청마다 동작한다