fetching: getStaticProps

hwisaac·2023년 3월 11일

Next.js

목록 보기

8/29

만약 페이지에서 getStaticProps라는 함수를 export 한다면 (정적 사이트 생성), Next.js는 getStaticProps에서 반환된 props를 사용하여 빌드 시점에 이 페이지를 프리랜더링합니다.

export async function getStaticProps(context) {
  return {
    props: {}, // 페이지 컴포넌트에 props로 전달됩니다
  };
}

렌더링 타입과 관계없이, 모든 props가 페이지 컴포넌트에 전달되고 클라이언트 사이드에서 초기 HTML에서 확인할 수 있습니다. 이는 페이지를 적절히 hydrated 하기 위한 것입니다. 민감한 정보가 props로 클라이언트에 노출되지 않도록 주의해야 합니다.

getStaticProps는 언제 사용해야 할까요?

다음의 경우에 getStaticProps를 사용해야 합니다:

사용자 요청 전에 페이지를 렌더링하는 데 필요한 데이터가 빌드 시간에 사용 가능한 경우
데이터가 headless CMS에서 가져오는 경우
페이지를 사전 렌더링해야 하며 SEO를 위해 매우 빠를 경우 - getStaticProps는 HTML 및 JSON 파일을 생성하므로 성능을 위해 CDN에 캐시할 수 있습니다.
데이터가 공개적으로 캐시될 수 있는 경우(사용자별로 다르지 않음). 이 조건은 미들웨어를 사용하여 경로를 다시 작성하는 것으로 특정한 상황에서 우회할 수 있습니다.

getStaticProps는 언제 실행되나요?

getStaticProps는 항상 서버에서 실행되며 클라이언트에서는 실행되지 않습니다. getStaticProps에서 작성된 코드가 클라이언트 측 번들에서 제거되었는지를 확인하려면 이 도구를 사용할 수 있습니다.
getStaticProps는 항상 next build 중에 실행됩니다.
fallback: true를 사용하는 경우 getStaticProps는 백그라운드에서 실행됩니다.
fallback: blocking을 사용하는 경우 getStaticProps는 초기 렌더링 전에 호출됩니다.
revalidate를 사용하는 경우 getStaticProps는 백그라운드에서 실행됩니다.
revalidate()를 사용하는 경우 getStaticProps는 필요한 경우 백그라운드에서 실행됩니다.

즉, getStaticProps는 새로 고침이나 다른 사용자 요청을 통해 페이지를 방문할 때마다 실행되지 않습니다. 대신, 새로운 빌드가 배포될 때마다 실행됩니다. 중요한 것은 getStaticProps는 클라이언트의 요청과 상관없이 정적 HTML을 생성한다는 것입니다. 이에 따라, getStaticProps는 요청과 관련된 정보(예: 쿼리 매개변수 또는 HTTP 헤더)에 액세스할 수 없습니다. 페이지에 대한 요청 정보에 액세스해야 하는 경우, getStaticProps에 미들웨어를 추가하여 처리할 수 있습니다.

CMS에서 데이터 가져오기 위해 getStaticProps 사용하기

다음 예제는 CMS에서 블로그 게시물 목록을 가져오는 방법을 보여줍니다.

// posts는 getStaticProps()에서 빌드 시 미리 채워질 것입니다.
function Blog({ posts }) {
  return (
    <ul>
      {posts.map((post) => (
        <li>{post.title}</li>
      ))}
    </ul>
  );
}

// 이 함수는 서버 측에서 빌드 시 호출됩니다.
// 클라이언트 측에서 호출되지 않으므로
// 직접 데이터베이스 쿼리를 수행할 수도 있습니다.
export async function getStaticProps() {
  // 글 목록을 가져오기 위해 외부 API 엔드포인트를 호출합니다.
  // 데이터 가져오기 라이브러리를 사용할 수 있습니다.
  const res = await fetch('https://.../posts');
  const posts = await res.json();

  // { props: { posts } }를 반환함으로써, Blog 컴포넌트는
  // 빌드 시간에 `posts`를 프롭으로 받게 됩니다.
  return {
    props: {
      posts,
    },
  };
}

export default Blog;

getStaticProps API 참조 문서에서 getStaticProps와 함께 사용할 수 있는 모든 매개변수와 props를 다루고 있습니다.

서버 사이드 코드 직접 작성

getStaticProps는 서버 측에서만 실행되므로 클라이언트 측에서는 실행되지 않습니다. 브라우저의 JS 번들에도 포함되지 않으므로 브라우저로 전송되지 않고 직접 데이터베이스 쿼리를 작성할 수 있습니다.

즉, getStaticProps에서 외부 소스에서 데이터를 가져 오는 API route를 가져오는 대신 서버 측 코드를 직접 작성할 수 있습니다.

다음 예를 살펴보십시오. API route에서 CMS에서 일부 데이터를 가져옵니다. 그런 다음 getStaticProps에서 API route를 직접 호출합니다. 이는 성능을 저하시키는 추가 호출을 생성합니다. 대신 CMS에서 데이터를 가져 오는 로직을 lib/ 디렉토리를 사용하여 공유 할 수 있습니다. 그러면 getStaticProps와 공유할 수 있습니다.

// lib/load-posts.js

// 다음 함수는 lib/ 디렉토리에서
// getStaticProps 및 API route에서 공유됩니다.
export async function loadPosts() {
  // 게시물을 가져 오기 위해 외부 API endpoint를 호출합니다.
  const res = await fetch('https://.../posts/');
  const data = await res.json();

  return data;
}

// pages/blog.js
import { loadPosts } from '../lib/load-posts';

// 이 함수는 서버 측에서만 실행됩니다.
export async function getStaticProps() {
  // API route를 가져 오는 대신
  // getStaticProps 내에서 동일한 함수를 직접 호출할 수 있습니다.
  const posts = await loadPosts();

  // 반환 된 props는 페이지 컴포넌트로 전달됩니다.
  return { props: { posts } };
}

데이터를 가져 오기 위해 API route를 사용하지 않는 경우 getStaticProps에서 fetch() API를 직접 사용하여 데이터를 가져올 수 있습니다.

또한 클라이언트 측 번들에서 Next.js가 제거하는 것을 확인하려면 next-code-elimination 도구를 사용할 수 있습니다.

getStaticProps를 사용하여 정적 HTML 및 JSON 파일을 생성

getStaticProps를 사용하여 빌드 시간에 사전 렌더링 된 페이지는 페이지 HTML 파일 외에도 getStaticProps를 실행한 결과를 보유하는 JSON 파일을 생성합니다.

이 JSON 파일은 next/link 또는 next/router를 통해 클라이언트 측 라우팅에서 사용됩니다. getStaticProps를 사용하여 사전 렌더링된 페이지로 이동하면 Next.js가 이 JSON 파일(빌드 시 미리 계산된)을 가져와 페이지 구성 요소의 props로 사용합니다. 이는 클라이언트 측 페이지 전환에서 getStaticProps가 호출되지 않는다는 것을 의미합니다.

증분 정적 생성을 사용할 때는 클라이언트 측 탐색에 필요한 JSON을 생성하기 위해 getStaticProps가 백그라운드에서 실행됩니다. 이는 동일한 페이지에 대해 여러 요청이 발생할 수 있지만, 이는 의도된 것이며 최종 사용자의 성능에 영향을 미치지 않습니다.