[공식문서] NextJS - Pre-rendering and Data Fetching #7

getStaticProps 구현하기

Next.js의 사전 렌더링

Next.js에는 Static Generation 및 Server-side Rendering이라는 두 가지 사전 렌더링 형식이 있습니다. 차이점은 페이지의 HTML을 생성하는 시점에 있습니다.

 

• Static Generation은 HTML을 빌드 시간에 생성하는 사전 렌더링 방법입니다. 사전 렌더링된 HTML은 각 요청마다 재사용됩니다.
• Server-side Rendering은 각 요청마다 HTML을 생성하는 사전 렌더링 방법입니다.

중요한 점은 Next.js에서 각 페이지에 사용할 사전 렌더링 형식을 선택할 수 있다는 것입니다. Static Generation을 대부분의 페이지에 사용하고 일부 페이지에 Server-side Rendering을 사용하여 "하이브리드" Next.js 앱을 만들 수 있습니다.

Static Generation 사용하기 (getStaticProps())

이제 pages/index.js에서 getSortedPostsData를 가져오고 getStaticProps 내에서 호출해야 합니다.
에디터에서 pages/index.js를 열고 다음 코드를 내보낸 Home 컴포넌트 위에 추가하세요.

import { getSortedPostsData } from '../lib/posts';

export async function getStaticProps() {
  const allPostsData = getSortedPostsData();
  return {
    props: {
      allPostsData,
    },
  };
}

 

getStaticProps에서 props 객체 내에서 allPostsData를 반환함으로써 블로그 게시물이 Home 컴포넌트에 prop으로 전달됩니다. 이제 다음과 같이 블로그 게시물에 액세스할 수 있습니다.

export default function Home ({ allPostsData }) { ... }

블로그 게시물을 표시하려면 Home 컴포넌트를 업데이트하여 자기 소개 아래에 데이터가 있는 다른 <section> 태그를 추가하세요. 또한 ()에서 ({ allPostsData })로 props를 변경하지 않도록 주의하세요.

export default function Home({ allPostsData }) {
  return (
    <Layout home>
      {/* Keep the existing code here */}

      {/* Add this <section> tag below the existing <section> tag */}
      <section className={`${utilStyles.headingMd} ${utilStyles.padding1px}`}>
        <h2 className={utilStyles.headingLg}>Blog</h2>
        <ul className={utilStyles.list}>
          {allPostsData.map(({ id, date, title }) => (
            <li className={utilStyles.listItem} key={id}>
              {title}
              <br />
              {id}
              <br />
              {date}
            </li>
          ))}
        </ul>
      </section>
    </Layout>
  );
}

 

이제 http://localhost:3000에 액세스하면 블로그 데이터를 볼 수 있어야 합니다.

Next .js 공식문서 - 블로그 게시글 연동 결과페이지

 

축하합니다! 우리는 외부 데이터(파일 시스템에서)를 가져와 이 데이터로 인덱스 페이지를 사전 렌더링했습니다.

Next .js 공식문서 - getStaticProps() 사용해서 블로그 데이터 가져오기

 

다음 페이지에서 getStaticProps 사용에 대한 몇 가지 유용한 팁에 대해 이야기하겠습니다.