next.js 데이터 가져오기 getServerSideprops, getStaticProps, getStaticPaths

next.js는 프리렌더링(pre-rendering) 기능을 제공합니다.
말 그대로 사전에 미리 html을 렌더링 한다는 것인데요 즉 html을 미리 생성하고 최소한의js를 연결시킨 후 클라이언트에서 요청이 들어오면 해당 html을 로드하면서 나머지js를 불러와 화면에 렌더링 시켜주는 것이죠.

next.js는 주로 두가지 프리렌더링 방법을 제공합니다

- Server-side rendering: SSR 
- Static site rendering: SSG

next.js의 프리렌더링 으로 각 page에 getServerSideProps ,getStaticProps, getStaticPaths 를 사용해서 데이터를 가져올수 있습니다





1. getServerSideProps (SSR)

getServerSideProps 는 요청할때마다 html이 생성되기 때문에 데이터가 계속 업데이트 됩니다.
요청할때마다 데이터를 계속 불러오는 것이죠.
그래서 데이터를 새로 받아오면 그 데이터로 페이지가 렌더링 됩니다.

//page

function Page({ data }) {
...
}

export async function getServerSideProps() {

  const res = await axios.get(`https://localholst:3065/user`)
  const data = res.data

  return { props: { data } }
}

 

page를 사용자가 요청하면 getServerSideProps 를 먼저 실행후 프론트가 서버에 직접요청 후 데이터를 받아와서 page 컴포넌트에 date를 props로 전달하여 렌더링 할 수 있습니다.
getServerSideProps 는 계속 데이터가 바뀌어야하는 페이지의 경우 사용합니다. 

2. getStaticProps, getStaticPaths (SSG)

html이 빌드타임에 생성됩니다.
빌드할때 데이터를 가져와서 html 을 생성후 사용자의 요청이 들어올때마다 빌드된 html 을 재사용합니다.

//page

function Page({ data }) {
...
}

export async function getStaticProps() {

  const res = await axios.get(`https://localholst:3065/user`)
  const data = res.data

  return { props: { data } }
}

아무래도 미리 html파일을 만들어놓고 요청시에 보여주기 때문에 성능적으로 봤을때 빠릅니다.
하지만 데이터가 계속 바뀌어야하는 페이지라면 이 방법은 쓰지 않는게 좋습니다.
내 페이지가 계속 업데이트 되지 않는페이지라면 ? 그때 이 getStaticProps 를 쓰는 것이 좋겠죠.

다이나믹 라우팅을 사용하여 정적페이지를 만들경우에 getStaticProps 를 사용한다면 getStaticPaths와 함께 써주어야 합니다.

//pages/users/[id].js

function Page({ data }) {
...
}

export async function getStaticPaths() {
  const posts = await axios.get("https://jsonplaceholder.typicode.com/posts");
  const paths = posts.map(({ id }) => ({ params: { id: `${id}` } }));
// params: {id : '1'},{id : '2'}...

  return {
    paths,
    fallback: false,
  };
}

export async function getStaticProps() {

  const res = await axios.get(`https://localholst:3065/user`)
  const data = res.data

  return { props: { data } }
}

getStaticPaths에서 params에 빌드하고싶은 페이지를 넣어야 해요.
만약 user/[id].js 에 id 값이 1이라면 params에 {id:'1'} 로 넣어주어야 합니다.
즉 빌드할 페이지들을 서버에서 다 가져오서 html 로 뽑아놓겠다는 것이죠.
그런데 만약 미리 빌드한 페이지말고 새로운 페이지 요청이 들어온다? 
이걸 방지해서 next.js 에서 친절히 옵션을 만들어두었어요 바로 fallback! 

//pages/users/[id].js

function Page({ data }) {
 const router = useRouter()

  if (router.isFallback) {
    return <div>Loading...</div>
  }
...
}

export async function getStaticPaths() {
  const posts = await axios.get("https://jsonplaceholder.typicode.com/posts");
  const paths = posts.map(({ id }) => ({ params: { id: `${id}` } }));
// params: {id : '1'},{id : '2'}...

  return {
    paths,
    fallback: true,
  };
}

export async function getStaticProps() {

  const res = await axios.get(`https://localholst:3065/user`)
  const data = res.data

  return { props: { data } }
}

만약 user 정보를 id값이 3까지인 페이지를 빌드해두었다고 해봅시다.
fallback을 true로 설정할경우 사용자가 http://..../user/4 인 페이지를 요청하면 user/4 인 html을 생성해줍니다.
그때 빌드시간이 걸리기 때문에 컴포넌트에 router.isFallback을 사용하여 로딩중 표시를 띄어줍니다.

우리는 이것을 알아두고 페이지가 데이터를 어떻게 변할것인지를 파악하여 사용할 수 있어야 합니다.





📌 요약하자면?

요청에 따라 페이지가 데이터를 계속 업데이트해야한다 ! 그러면 getServerSideProps 를 사용하자!
요청이 들어와도 데이터의 변화는 없고 미리 렌더링해두어도 괜찮다 그러면 getStaticProps 를 사용하자! 






⏰ 사라지는 getinitialProps

또한 next.js가 9.3로 되면서 getServerSideProps ,getStaticProps, getStaticPaths 가 새로 생겼습니다.
그전에는 getinitialProps 를 사용하고 있었고 지금은 이방법은 권장하지 않는다고 한다고 해요. 
next.js는 getinitialProps 대신 getServerSideProps 를 사용하라고 권장하고 있습니다.