[번역] Pre-rendering and Data Fetching

WOOSUNG·2023년 2월 1일
1

Next

목록 보기
2/2
post-thumbnail

공식문서

SSG -> Static Generation
SSR -> Server-side Rendering

Pre-rendering

Data Fetching 대해 이야기하기 전에 Next.js : Pre-rendering에서 가장 중요한 개념 중 하나에 대해 이야기 해 봅시다.

기본적으로 Next.js는 모든 페이지를 미리 렌더링합니다. 즉, Next.js는 클라이언트 측 JavaScript로 모든 작업을 수행하는 대신 사전에 각 페이지에 대해 HTML을 생성합니다. 이는 더 나은 성능의 SEO 결과로 나타납니다.

생성 된 각 HTML은 해당 페이지에 필요한 최소한의 JavaScript 코드와 연결됩니다. 페이지가 브라우저에 의해로드되면 JavaScript 코드가 실행되어 페이지가 완전히 상호 작용하게됩니다. (이 과정을 Hydration이라고합니다.)

Pre-rendring과 No Pre-rendering의 비교

Pre-rendring

  • 최초 로드 시 : 사전 렌더링된 HTML이 보여집니다.
  • Hydration : 리액트 컴포넌트들이 초기화되고, 상호작용이 가능해집니다. <Link />와 같이 상호작용 가능한 컴포넌트가 있다면 JS가 로드된 후 상호작용이 가능해집니다.

No Pre-rendering

  • 최초 로드 시: App이 렌더되지 않습니다.
  • Hydration : 리액트 컴포넌트들이 초기화되고, 상호작용 가능해집니다.

Two Forms of Pre-rendering

Next.js는 Static Generation(정적생성)Server-side Rendering(서버측 렌더링)의 두가지 형태의 pre-rendering 방식을 가집니다. 두 방식의 차이점은 언제 HTML 페이지가 생성되느냐에 있습니다.

  • Static Generation 방식은 HTML이 build time에 생성됩니다. 이 pre-rendered된 HTML은 각 요청에 재사용됩니다.
  • Server-side Rendering 방식은 각 요청시마다 HMTL이 생성됩니다.

Static Generation

  • HTML이 빌드 시 생성됩니다. 그리고 생성된 HTML은 각 요청시 재사용되어집니다.

Server-side Rendering

  • HTML이 각 요청마다 생성됩니다.
개발 모드(npm run dev 또는 yarn dev 실행 시)에서는 모든 요청에 대해 페이지가 미리 렌더링됩니다. 이는 정적 생성에도 적용되어 개발이 쉬워집니다. 프로덕션으로 이동할 때 정적 생성은 모든 요청이 아닌 빌드 시간에 한 번 발생합니다.

Pre-page Basis

중요한 것은 Next.js를 사용하여 각 페이지에 사용할 사전 렌더링 양식을 선택할 수 있다는 것입니다. 대부분의 페이지에서 정적 생성을 사용하고 다른 페이지에서는 서버 측 렌더링을 사용하여 "하이브리드" Next.js 앱을 만들 수 있습니다

When to Use Static Generation VS Server-side Rendering

가능하면 Static Generation(데이터가 있든 없든)을 사용하는 것이 좋습니다. 왜냐하면 페이지는 한 번 작성되고 CDN에 의해 제공되므로 모든 요청에 대해 서버가 페이지를 렌더링하는 것보다 훨씬 더 빠르기 때문입니다.

다음을 포함하여 여러 유형의 페이지에 대해 정적 생성을 사용할 수 있습니다.

  • 마케팅 페이지
  • 블로그 포스트
  • 전자 상거래 제품 목록
  • 도움말 및 문서

"사용자의 요청보다 먼저 이 페이지를 미리 렌더링할 수 있는가?" 만약 대답이 '예'라면, Static Generation을 선택해야 합니다. 반면에, Static Generation은 사용자의 요청보다 먼저 페이지를 미리 렌더링할 수 없는 경우에는 좋은 생각이 아닙니다. 페이지에 자주 업데이트되는 데이터가 표시되고 모든 요청에 따라 페이지 내용이 변경될 수 있습니다. 이 경우 Server-side Rendering을 사용할 수 있습니다. 느려지지만 미리 렌더링된 페이지는 항상 최신 상태입니다. 또는 Pre-rendering을 건너뛰고 클라이언트 측 JavaScript를 사용하여 자주 업데이트되는 데이터를 채울 수 있습니다.


Static Generation with and without Data

Static Generation 방식은 데이터를 사용하거나 사용하지 않고 수행할 수 있습니다. 이러한 페이지는 앱이 제작을 위해 제작될 때 자동으로 정적으로 생성됩니다.

그러나 일부 페이지의 경우 먼저 외부 데이터를 가져오지 않고 HTML을 렌더링할 수 없습니다. 파일 시스템에 액세스하거나 외부 API를 가져오거나 빌드 시 데이터베이스를 쿼리해야 할 수 있습니다. Next.js는 이 경우(데이터가 포함된 정적 생성)를 즉시 지원합니다.

데이터가 있는 Static Generation

  • 외부 데이터를 가져올 수 있는 페이지들은 빌드시 생성됩니다. (외부 데이터를 받고 난 후)

Static Generation with Data using getStaticProps

getStaticProps를 이용한 데이터가 있는 정적 생성

어떻게 작동하나요? Next.js에서는 페이지 구성 요소를 내보낼 때 getStaticProps라는 비동기 함수도 내보낼 수 있습니다. 이렇게 하면 다음과 같습니다:

  • getStaticProps는 프로덕션에서 빌드 시간에 실행합니다.
  • 함수 내에서, 외부 데이터를 가져오고 보낼 수 있습니다. 그리고 이 데이터는 페이지에 props의 형태로 return 됩니다.
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는 각 요청에서 대신 실행됩니다.

0개의 댓글

Powered by GraphCDN, the GraphQL CDN