3. Static Generation with data | 번역

https://nextjs.org/docs/basic-features/pages#server-side-rendering

공식문서 번역하면서 공부해보기 
 
for study ! :)

Basic Features: Pages | Next.js

---

1번 케이스 : 페이지의 컨텐츠가 외부데이터에 의존할때

export default function Blog({ posts }) {
  return (
    <ul>
      {posts.map((post) => (
        <li>{post.title}</li>
      ))}
    </ul>
  )
}

 
사전렌더링안에서  데이터를 fetch할때 ,

• Next.js는 같은 파일 안에서 비동기함수 getStaticProps 를 export하게 한다.
• 이 함수는 빌드할때 호출되어지고, fetch된 data를 사전렌더링할때 page의 props로 전달해준다. 

export default function Blog({ posts }) {
  // 포스트들을 렌더링하는 로직
}

// 이 함수들은 빌드할때 호출되어집니다
export async function getStaticProps() {
  // 포스트들을 가져오기 위해서 외부 API를 호출한다. 
  const res = await fetch('https://.../posts')
  const posts = await res.json()

  // Blog 컴포넌트인 { props: { posts } }를 리턴합니다.
  // 빌드할때 'posts'라는 이름으로 propt들을 받을 수 있다. 
  return {
    props: {
      posts,
    },
  }
}

2번 케이스 : 페이지의 경로가 외부데이터에 의존할때

Next.js는 다이나믹 라우트로 페이지를 만든다.
파일을 pages/posts/[id].js 경로로 id에 따라 각각의 페이지를 만들 수 있다.
그러나 빌드시 pre-render되는 id는 외부 데이터에 의존적인것이다.
 예를 들어 : DB에 id가 1인 하나의 게시글을 추가했다고 가정하면,
빌드할때 posts/1만 pre-render하면된다.
나중에 id가 2인 두번째 게시글을 추가한다면, posts/2 또한 사전렌더링될것입니당
 

• 그래서 pre-render된 페이지 경로들은 외부데이터에 의존적인것이고,
• 이걸 다루기 위해서 Next.js는 getStaticPaths라고 불리는 비동기 함수를 export하게 합니당
• 이 함수는 빌드할때 호출되고, pre-render를 원하는 경로들을 지정해줍니다!

export async function getStaticPaths() {
  // 포스트들을 가져오기 위해 외부 API를 호출한다. 
  const res = await fetch('https://.../posts')
  const posts = await res.json()

  // posts들에 의존하는 pre-render하기 원하는 경로들을 가져온다. 
  const paths = posts.map((post) => ({
    params: { id: post.id },
  }))

  // 이 경로들은 빌드할때만 pre-render될것이다. 
  //  { fallback: false }는 다른 경로들은 404Error가 될것을 의미함.
  return { paths, fallback: false }
}

언제 Static Generation을 사용해야할까?

페이지가  한번 빌드되고, CDN에 의해 serve되기 위해서
가능하다면 Static Generation을 사용하는걸 추천한당
매번 요청들로 서버렌더링을 할때보다 더 빨라질거거든 ~ 
 
Static Generation을 이용하는 많은 경우들

• 마케팅 페이지
• 블로그 포스트들과 포트폴리오들
• 이커머스 상품리스트들
• 도움말과 문서들

만약에 내가 유저들의 요청보다 앞서서 pre-render해야한다면
Static Generation을 선택하쉬라
 

---

반면에 Static Generation은 좋은 선택이 아닐때는:
만약에 유저들의 요청에 앞서서 pre-render를 할 수 없을때인데, 
빈번하게 data들이 업데이트 되고, 매번 요청이 있어서 페이지컨텐츠가변경될때이다.
 
이럴 경우에는

•  Static Generation을 Client-side에서 data를 fetch해서 같이 사용해라
  • client-side js로 pre-rendering을 피할수 있다. 
•  SSR을 사용해라

---

SSR

만약에 페이지가 SSR을 이용하고 있다면 page HTML은 매 요청마다 만들어질것이당
SSR을 이용하기 위해서 getServerSideProps라는 비동기 함수를 export해야한다.
이 함수는 매 요청마다 호출될것이다. 
예를 들어 페이지가 빈번하게 업데이트되는 데이터들로  pre-render되어야한다고 가정한다.
그럴땐 getServerSideProps를 사용해서 data들을 fetch하고 Page컴포넌트에 전달해준다.

export default function Page({ data }) {
  // data들을 렌더링한다.
}

// 이 함수는 요청할때마다 호출될것이다.
export async function getServerSideProps() {
  // Fetch data from external API
  const res = await fetch(`https://.../data`)
  const data = await res.json()

  // prop를 통해 page에 data를 전달한다.
  return { props: { data } }
}

getServerSideProps 는 getStaticProps 와 비슷해보이지만 차이점이 있다.

• getServerSideProps는 빌드할때가 아니라 요청할때마다 실행된다.

---

혼자 공부하면서 번역한거라 틀릴가능성 높음

틀리면 알려주세요🥺