Next.js 공부

기본적으로 Next는 모든 페이지를 미리 렌더링 하여 각 페이지에 대해 미리 HTML 을 생성합니다.

두 가지 방식의 사전 렌더링이 있으며, 각 페이지에서 사용할 렌더링 방식을 선택할 수 있습니다

 

Static Generation (정적 생성)

- build시에 HTML이 생성되며 재사용 됩니다

- getStaticProps : 빌드시 데이터를 기반으로 콘텐츠를 가져옵니다 

- getStaticPaths : 빌드시 데이터를 기반으로 동적경로를 지정합니다

 

Server-side Rendering (서버 렌더링)

- 각 request에 대하여 HTML이 생성됩니다

- getServerSideProps : 각 요청에서 데이터를 가져옵니다

---

[getStaticProps, getStaticPaths, getServerSideProps]는 pages components에서 사용할수 있는 Next.js 고유 함수 입니다

서버측에서 실행되며 클라이언트 측에서는 실행되지 않습니다

 

getStaticProps

export async function getStaticProps(context) {
  return {
    props: {}
  }
}

- 객체를 반환해야 하며 props(필수) 를 넘겨주어야 합니다. ( page component 에서 받을 data )

 

 

getStaticPaths

export async function getStaticPaths() {
  return {
    paths: [
      { params: { ... } }
    ],
    fallback: true or false 
  };
}

- 객체를 반환해야 하며 paths(필수) 를 넘겨주어야 합니다. ( 파일명이 [idx].js 라면 { params: { idx: 1}} 이런식 )

- fallback(필수) false 일때 없는 경로 일시 404 페이지.
- fallback(필수) true 일때 없는 경로라도 그대로 실행됩니다.

- getServerSideProps 와 함께 사용할수 없습니다.

 

 

getServerSideProps

export async function getServerSideProps(context) {
  return {
    props: {}
  }
}

- 객체를 반환해야 하며 props(필수) 를 넘겨주어야 합니다. ( page component 에서 받을 data )