Basic Features > Data Fetching 2 [공식 문서로 공부하는 Next.js]

Data Fetching  > getStaticProps

 

언제 getStaticProps를 사용하나요?

• 페이지를 렌더링하는 데 필요한 데이터는 사용자의 요청에 앞서 미리 빌드해야하는 경우
• headless CMS에서 데이터를 가져오는 경우
• 공개적으로 데이터가 캐시되어야 하는 경우(사용자별 아님).
• 페이지는 pre-rendering 되어야하고 매우 빨라야 하는 경우(getStaticProps는 성능을 위해 CDN에서 캐시할 수 있는 HTML 및 JSON 파일을 생성합니다.)

Incremental Static Regeneration(ISR)

ISR은 개발자와 콘텐츠 편집자가 전체 사이트를 다시 빌드할 필요 없이 페이지별로 변경하고 생성할 수 있습니다.
즉 변경된 데이터만 빌드하게 해주는 Next.js 기능입니다.

getStaticProps 의 revalidate 속성을 통해 ISR을 활성화 할 수 있습니다.

 

export async function getStaticProps() {
  const res = await fetch('https://.../posts')
  const posts = await res.json()

  return {
    props: {
      posts,
    },
    // Next.js will attempt to re-generate the page:
    // - When a request comes in
    // - At most once every 10 seconds
    revalidate: 10, // In seconds
  }
}

 

Build time 시 pre-rendering 된 페이지가 호출이 되면 처음에는 캐시된 페이지가 표시됩니다.

• 초기 요청 후 10초 전에 페이지에 대한 모든 요청도 캐시되고, 즉각적입니다.
• 10 초후 다음 요청은 여전히 캐시된 페이지를 보여줍니다.
• Next.js는 백그라운드에서 페이지 재생성을 트리거합니다.
• 페이지가 성공적으로 생성되면 Next.js는 캐시를 무효화하고 업데이트된 제품 페이지를 표시합니다.
• 페이지 생성이 실패하면 업데이트 되지 않습니다.

파일 읽기 : process.cwd()

파일은 getStaticProps의 파일 시스템에서 직접 읽을 수 있습니다.
주의 ) 파일의 전체 경로 필요
Next.js는 코드를 별도의 디렉토리로 컴파일하므로 _dirname을 반환할 경로로 사용할 수 없습니다. 이 경로는 페이지 디렉토리와 다릅니다. _dirname 대신에 process.cwd()를 사용할 수 있습니다.

import { promises as fs } from 'fs'
import path from 'path'

function Blog({ posts }) {
  return (
    <ul>
      {posts.map((post) => (
        <li>
          <h3>{post.filename}</h3>
          <p>{post.content}</p>
        </li>
      ))}
    </ul>
  )
}

export async function getStaticProps() {
  const postsDirectory = path.join(process.cwd(), 'posts')
  const filenames = await fs.readdir(postsDirectory)

  const posts = filenames.map(async (filename) => {
    const filePath = path.join(postsDirectory, filename)
    const fileContents = await fs.readFile(filePath, 'utf8')

    return {
      filename,
      content: fileContents,
    }
  })

  return {
    props: {
      posts: await Promise.all(posts),
    },
  }
}

export default Blog

세부사항

• 오직 빌드 시에만 실행됩니다.
  그렇기 때문에 요청시에만 사용할 수 있는 데이터를 수신하지 않습니다.(쿼리 매개변수나 HTTP헤더)
• getStaticProps는 서버 측에서만 실행됩니다.
  그래서 내부API를 호출하면 안되지만 데이터 쿼리를 호출할 수 있고, 직접 서버 측 코드를 작성할 수 있습니다.
• HTML과 JSON을 모두 정적으로 생성합니다.
  getStaticProps가 있는 페이지가 빌드시 미리 렌더링되면 페이지 HTML 파일 외에도 Next.js가 getStaticProps 실행 결과를 포함하는 JSON 파일을 생성합니다.
  이 JSON 파일은 'next/link','next/router' 를 통한 client-side routing에 사용됩니다. getStaticProps를 사용하여 pre-rendering된 페이지로 이동하면 Next.js는 이 JSON 파일(빌드 시 미리 계산됨)을 가져와 페이지 컴포넌트의 props으로 사용합니다. 즉, 내보낸 JSON만 사용되므로 client-side 페이지 전환은 getStaticProps를 호출하지 않습니다.
• 페이지에서만 허용됩니다.
  페이지가 렌더링되기 전에 React에 필요한 모든 데이터가 있어야 하기 때문입니다. 또한 반드시 export async function getStaticProps() {} 로 사용해야합니다.
• 개발모드에서는 모든 요청에 대해 실행됩니다.

 

 

Basic Features: Data Fetching | Next.js