Pre-rendering

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: ...
  }
}

📍프리렌더링이란?

📍프리렌더링 이루어지는 것 확인하기

📍프리렌더링의 2가지 형태

📍이 2가지는 언제 사용해야 할까?

📍SG with Data using getStaticProps 비동기 함수

티스토리툴바