[Next.js] 데이터 불러오기

사전 렌더링 방법

1. 정적 생성 : 빌드 시에 페이지를 HTML로 만들어 요청 시 제공

const App = () => (
  <div>
    <img src="/example.jpg" alt="예시" />
  </div>
);
export default App;

public 폴더를 이용하게 되면 정적 파일을 제공할 수 있다.

2. 서버 사이드 렌더링 : 페이지 요청 시 서버 사이드 렌더링을 통하여 HTML을 제공

👉 외부 데이터를 필요로 하지 않는다면 정적 생성 방법을 사용하고 외부 데이터를 필요로 한다면 서버 사이드 렌더링을 통하여 외부 데이터를 이용하여 렌더링을 한 후 HTML을 제공해야 한다.

서버 사이드 렌더링 방법

getServerSideProps

const index = ({ user }) => {
  const username = user && user.name;
  return <div>{username}</div>;
};

export const getServerSideProps = async () => {
  try {
    const res = await fetch('https://~~');
    if (res.status === 200) {
      const user = await res.json();
      return { props: { user } };
    }
  } catch (e) {
    console.log(e);
    return { props: {} };
  }
};

export default index;

getServerSideProps는 이름 그대로 서버 측에서 props를 받아오는 기능을 한다. 페이지 요청 시마다 실행이 되며 getServerSideProps에서 페이지로 전달해준 데이터를 서버에서 렌더링 한다. 서버에서 실행되기 때문에 콘솔 출력이 브라우저가 아닌 터미널에서 된다. getServerSideProps에서 리턴한 props 값들은 페이지의 props로 전달된다.

• 동적 라우팅
  getServerSideProps와 동적 라우팅을 사용하려면 예를들어 '/users/[name]' 페이지로 이동하기 위해 파일명의 [name]값은 getServerSideProps의 매개변수 값인 query로 받아올 수 있다.

export const getServerSideProps = async ({ query }) => {
  const {name} = query;
  try {
    const res = await fetch('https://~~/users/${name}');
    if (res.status === 200) {
      const user = await res.json();
      return { props: { user } };
    }
  } catch (e) {
    console.log(e);
    return { props: {} };
  }
};

export default name;

getStaticProps

const staticPage = ({ time }) => {
  return <div>{time}</div>;
};
export const getStaticProps = async () => {
  return { props: { time: new Date().toISOString() } };
};
export default staticPage;

getStaticProps는 getServerSideProps와 다르게 빌드 시에 데이터를 불러와 결과를 json으로 저장하여 사용한다. 따라서 페이지의 요청시간과 상관없이 일관된 데이터를 사용자에게 보여준다.

❓ props 데이터가 변경되기를 원할 때는 어떻게 해야하나?
👉 9.5버전부터 revalidate라는 값이 추가되어 변경이 가능

export const getStaticProps = async () => {
  return { props: { time: new Date().toISOString() }, revalidate: 3 }; // 3초
};

revalidate 값을 전달해 주면 정해진 시간마다 요청이 들어올 때 데이터를 갱신하여 제공한다. 단위는 초 단위이다.

• 동적 라우팅
  getStaticProps 동적 라우팅을 사용하려면 예를들어 '/users/[name]' 페이지로 이동하기 위해 파일명의 [name]값은 getServerSideProps의 매개변수 값인 query대신 params를 사용하면 받아올 수 있다.또한 getStaticPaths를 이용하여 params를 미리 지정해 주어야 한다. fallback 값은 지정한 경로 외의 경로에 대해 설정을 한다. false라면 이외의 경로는 404 페이지로 가게 된다.

export const getStaticProps = async ({ params }) => {
  // try catch 문 생략
  return { props: { time: new Date().toISOString() } };
};
export async function getStaticPaths() {
  return {
    paths: [{ params: { name: 'yongwoo' } }],
    fallback: true,
  };
}
export default name;

❓ getStaticPaths는 언제 사용하나?
👉 페이지의 경로가 외부 데이터에 의존할 때 사용한다.

getInitalProps

❗ Next.js는 9.3이상의 버전부터 getServerSideProps와 getStaticProps를 사용하는 것을 권장한다.

name.getInitialProps = async ({ query }) => {
  const { name } = query;
  try {
    const res = await fetch('https://~~/users/${name}');
    if (res.status === 200) {
      const user = await res.json();
      return { user };
    }
  } catch (e) {
    console.log(e);
    return {};
  }
};

props 속성을 사용하지 않고 return한다.