[Next.js] 데이터 가져오기

니나노개발생활·2022년 2월 8일

💡ah-ha

목록 보기

44/51

Data Fetching

Static Generation : 미리 모든 데이터를 준비한 후 정적 페이지로 만들어 이를 파일단위로 serve

Server-side Rendering : 페이지를 서버에서 생산하여 내려주는 방식 > node-server

getStaticProps(Static Generation)

빌드 시 고정되는 값 >> 빌드 이후 변경 불가
프로젝트가 빌드될 때 데이터를 가져온다.

// 전달된 props
function Blog({ posts }) {
  return (
    <ul>
      {posts.map(post => (
        <li>{post.title}</li>
      ))}
    </ul>
  );
}

export async function getStaticProps() {
  // api를 통해 받은 data 정보
  const res = await fetch("https://.../posts");
  const posts = await res.json();

  return {
    props: {
      posts
    }
    // page component의 props로 전달되는 객체
  };
}

export default Blog;

async 함수를 통해 export 하게 되면 반환된 속성 값을 이용하여 사전 렌더링을 진행한다.

getStaticProps 반환값

props

revailidate : 페이지 재생성이 발생할 수 있는 초

notFound(boolean) : 404 상태와 페이지를 리턴할지 결정

redirect : 리다이렉트 값이 들어 있는 객체, redirect는 { destination : string , permanent: boolean } 형태의 객체이다

언제 사용할까?

렌더링에 필요한 데이터가 빌드 시 사용자의 요청보다 먼저 사용 가능할 때
공통으로 캐시될 수 있는 데이터를 사용할 때
SEO를 위해 사전 렌더링 또는 빠른 로딩을 원할 때
(getStaticProps로 생성된 HTML 파일과 JSON파일은 CDN에 캐시됨)

getStaticPatchs(Static Generation)

빌드 시 정적으로 렌더링할 경로 설정
이곳에 정의하지 않은 하위 경로는 접근해도 페이지가 뜨지않음
데이터를 기반으로 동적 라우트를 지정한다.

export async function getStaticPaths() {
  return {
    //빌드 타임 때 아래 정의한  /dyna/1,  /dyna/2, ... /dyna/동적인값 경로만 pre렌더링.
    paths: [
      { params: { dynamic: 1 } },
      { params: { dynmic: 2 } }
      ......
      { params: { dynmic: 동적인값 } }
    ],
    // 만들어지지 않은 것도 추후 요청이 들어오면 만들어 줄 지 여부.
    fallback: true,
  }
}

getServerSideProps(Server-side Rendering)

각 요청이 있을 때마다 데이터를 가져온다.
런타임 환경에서 페이지에 접근 시 서버 측에서 실행.

function Page({data}) {
  ...
}
  
// 해당 페이지 렌더링 시 항상 실행
export async function getServerSideProps(context) {
  // api를 통해 받은 data 정보
  const res = await fetch("https://.../posts");
  const posts = await res.json();
  return {
    props: {data},
    //	page component의 Props로 전달되는 객체
  }
}