Next.js | 기본기능 | Data fetching(1)

페이지 내부에서 SSR을 할 때 getStaticProps 를 사용하여 빌드 시 이 페이지를 미리 렌더링한다.

 

pages폴더 하위에 about.tsx 파일을 만들고 다음과 같이 작성해보자.

 

/pages/about.js

function About({data}) {
    console.log(data)
    return <div>About</div>
  }
  
  export default About

  export async function getStaticProps(context) {
    return {
      props: {
          data : "Teepo"
      }, // will be passed to the page component as props
    }
  }

 

아래 getStaticProps로 props에 data를 담아서 About 컴포넌트로 보냈다.

 

npm run dev 명령어를 입력하고 확인해보자.

$ npm run dev

 

 

getStaticProps로 전달한 data값이 잘 넘어갔다.

 

나중에 fetch나 axios를 이용할 경우 다음과 같이 구현할 수 있다.

 

about.js

function About({data}) {
    console.log(data)
    return <div>About</div>
  }
  
export default About

export async function getStaticProps(context) {
    const res = await fetch(`https://jsonplaceholder.typicode.c/users`)
    const data = await res.json()

    return {
      props: { data }, // will be passed to the page component as props
    }
}

 

실행화면은 다음과 같다.

 

 

또한 redirect를 반환하여 리디렉션을 할 수 있다.

 

export async function getStaticProps(context) {
    const res = await fetch(`https://jsonplaceholder.typicode.com/users`)
    const data = await res.json()

    if (!data) {
      return {
        redirect: {
          destination: '/',
          permanent: false,
        },
      }
    }
  
    return {
      props: { data }, // will be passed to the page component as props
    }
}

 

다만, 빌드 시 리디렉션은 현재 허용되지 않으며 빌드 시 알려진 경우에 추가해야될 것들이 있다.

자세한 내용은 아래 주소로 확인해보자

 

https://nextjs.org/docs/api-reference/next.config.js/redirects

next.config.js: Redirects | Next.js

 

 

언제 getStaticProps를 사용할까?

• render되는 페이지가 필요한 데이터가 사용자 요청 전 빌드시에 활용가능한 data 일때
• data가 headless CMS에서 오는 data일때
• data가 사용자개인화가 필요하지 않은 공공성의 캐시된 data일때
• 해당 페이지가 SEO를 위해 반드시 pre-render 된 페이지 여야하고 매우 빨리 로드되어야 할 때, -- getStaticProps는 HTML과 JSON파일을 생성하고 둘 다 CDN에 의해 캐시되서 성능적으로 매우 좋다.

 

TypeScript - getStaticProps

타입스크립트를 사용한 about 페이지는 다음과 같다.

 

about.tsx

import { GetStaticProps } from 'next'

interface data  {
    name : string
    age : number
}

function About(data : data) {
    console.log(data)
    return <div>About</div>
  }
  
export default About

export const getStaticProps: GetStaticProps = async (context) => {

    const res = await fetch(`https://jsonplaceholder.typicode.com/users`)
    const data = await res.json()

    if (!data) {
      return {
        redirect: {
          destination: '/',
          permanent: false,
        },
      }
    }
  
    return {
      props: { 
          data: {
              name : "Teepo",
              age : 28
          }
        }, // will be passed to the page component as props
    }
}

GetStaticProps를 import 하고 data를 Object로 만들어보았다.