Next js getStaticProps

Fetch data at build time

export async function getStaticProps(context: {params, preview, previewData}) {
  return {
    props: {}, // Page Component의 Props로 전달되는 객체
  }
}

// getStaticProp()에 의해 빌드시에 게시물이 채워집니다.
function Blog({ posts }) {
  return (
    <ul>
      {posts.map((post) => (
        <li>{post.title}</li>
      ))}
    </ul>
  )
}

export async function getStaticProps() {
  // 외부 API endpoint로 Call 하여 Post 정보를 가져옵니다.
  const res = await fetch('https://.../posts')
  const posts = await res.json()

  // posts 데이터가 담긴 prop를 빌드시간에 Blog 컴포넌트에 전달합니다.
  return {
    props: {
      posts,
    },
  }
}

export default Blog

[Next.js] getStaticProps와 getServerSideProps

Next.js 9.3 미만 버전에서 SSR(Server Side Rendering), SSG(Static Site Generation)를 적용하기 위해서는 getInitialProps 메소드가 활용되었습니다. getInitialProps 를 통해 서버에서 미리 필요한 데이터들을 패칭 후 html 파일에 렌더링하고 클라이언트에 전송하여 SEO를 향상할 수 있었습니다. Next.js 9.3 이상 버전부터 SSR, SSG를 지원하기 위한 새로운 메소드가 등장하였습니다. getStaticProps, getServerSideProps 입니다.

https://nunucompany.tistory.com/5