1. getStaticProps

🕵️‍♀️ getStaticProps 란?

function Home ({data}){
 <h1>{data}</h1>
}

export async function getStaticProps(context) {
const data = await fetch('url')
  return {
    props: {data}, // will be passed to the page component as props
  }
}

반환된 props를 사용하여 빌드 시 이 페이지를 미리 렌더링하는
(Static Site Generation) 개념이다.

위 예시 코드 홈 페이지에서 getStaticProps 함수를 export 하게 되면 최초 빌드 시 props 데이터를 가지고 pre-rendering 한다.

---

❓ 언제 사용하는 게 좋을까?
1. 페이지 렌더링에 필요한 데이터가 사용자 요청에 앞서 빌드 시간에 사용할 수 있는 경우.
2. 페이지가 SEO를 위해 사전 렌더링되어야 하고, 빠르게 로딩되어야 하는 경우.

---

✍ 장점
호출 시 마다 fetch 하지 않아서 getServerSideProps 보다 성능면에서 좋다.

2. getServerSideProps

🕵️‍♀️ getServerSideProps 란?

function Home ({data}){
 <h1>{data}</h1>
}

export async function getServerSideProps(context) {
const data = await fetch('url')
  return {
    props: {data}, // will be passed to the page component as props
  }
}

반환된 props를 사용하여 각 요청 시 이 페이지를 미리 렌더링하는
(Dynamic Site Generation) 개념이다.

위 예시 코드 홈 페이지에서 getServerSideProps 함수를 export 하게 되면 페이지 요청 시 props 데이터를 가지고 pre-rendering 한다.

---

❓ 언제 사용하는 게 좋을까?
1. 동적으로 페이지 렌더링이 필요한 경우.

---

✍ 장단점
1. 페이지를 언제든 수정할 수 있다.
2. 호출 시 마다 fetch 가 이루어져 getStaticProps 보다 성능이 떨어진다.

3. getStaticPaths

🕵️‍♀️ getStaticPaths 란?

export default function Post({ post }) {
  // Render post...
}

// pages/posts/[id].js
// Generates `/posts/1` and `/posts/2`
export async function getStaticPaths() {
  return {
    paths: [{ params: { id: '1' } }, { params: { id: '2' } }],
    fallback: false, // can also be true or 'blocking'
  }
}

// `getStaticPaths` requires using `getStaticProps`
export async function getStaticProps(context) {
  return {
    // Passed to the page component as props
    props: { post: {} },
  }
}

동적 경로를 가지고 있는 페이지가 있고, 그 페이지가 getStaticProps를 사용한다면 getStaticPaths를 통해 빌드 타임 때 정적으로 렌더링할 경로를 설정해야 한다.

위 예시 코드에서 getStaticPaths 동적 경로를 사용하는 페이지
(/posts/1, /posts/2)에서 getStaticProps 함수를 export 하면 지정한 모든 경로를 사전 렌더링한다.

---

❓ 언제 사용하는 게 좋을까?
1. 동적 경로를 사용하고 페이지를 정적으로 사전 렌더링하는 경우 사용해야 한다.

---

✍ 장단점
1. 동적 경로를 사용하는 경우 활용성이 높다.
2. getStaticProps 와 같이 사용해야 한다.(정적)