Next.JS 데이터 패칭 getStaticProps.

Next.JS 데이터 패칭 getStaticProps.

 

오늘은 데이터패칭  data fetching에 사용되는 여러 방법 중 하나인 getStaticProps를 알아보겠습니다.

 

 

1. getStaticProps란?
2. 사용방법.
3. 마치며.

 

 

1. getStaticProps란?

 

Next.JS는 React.JS의 Framework입니다.

하지만 왜 이러한 getStaticProps라는 기능이 필요할까요?

잠깐 짧게 알아보겠습니다.

먼저 Next.JS에서는 대략 3 혹은 4가지의 data fetching이 있습니다.

getStaticProps, getStaticPaths, getServerSideProps 그리고 Client Side.

왜 이러한 여러가지 방법이 존재하는 것일까요?

이는 Next.JS가 기본 SSR 즉 Server Side Rendering을 지원하기 때문입니다.

그 반대는 당연히 CSR 즉 Client Side Rendering입니다.

SSR는 모든 필요한 렌더링을 완성시킨 뒤 Client에게 보냅니다.

그리고 Client 즉 브라우저는 이를 받아 리액트를 통해 렌더링만 해주는 것입니다.

이는 크게 2가지 장점이 있습니다.

첫 번째는 Client가 다운로드하고 준비해야 하는 파일 즉 Javascript가 적어진다는 것입니다.

이는 렌더링 속도를 크게 향상해줍니다.

두 번째는 bot이 필요한 데이터들을 바로 읽을 수 있다는 것입니다.
클라이언트에서 준비되고 렌더링 된 후 data fetching을 통해 나온 결과물은 우리가 눈으로 볼 때는 아무 문제없어보일지 몰라도

bot이 볼때는 아닙니다. 전체 HTML 파일을 들여다보면 데이터가 늦게 fetching 되어 사실 소스코드에 들어있지 않는 경우가 많기 때문입니다. 이는 SSR을 통해서 아주 손쉽게 개선될 수 있습니다.

 

getStaticProps가 그 방법 중 하나입니다.

이는 data fetching에 사용되며 대부분 처음 한 번만 fetching 되면 그 뒤 거의 변화가 없을 데이터들에 사용됩니다.

E-Commerce를 예로 들어보자면 제품의 이름, 정보, 가격 그리고 이미지 등이 이에 해당됩니다.

이러한 정보들은 사용자에게 보이면 되는 정보들입니다. 사용자가 상호작용하여 제품의 이름 혹은 가격을 변경하지는 않기 때문입니다.

자 그럼 코드를 보시겠습니다.

 

2. 사용방법.

import { NextPage } from 'next';

interface Props {
  id: number;
  name: string;
  age: number;
}

const AboutPage: NextPage<{ data: Props[] }> = ({ data }) => {
  return (
    <div>
      {data.map(({ id, name, age }) => {
        return (
          <div>
            <div>{id}</div>
            <div>{name}</div>
            <div>{age}</div>
          </div>
        );
      })}
    </div>
  );
};

export const getStaticProps = async () => {
  // const res = await fetch('https://rickandmortyapi.com/api/character');
  // const { results }: Props = await res.json();
  
  const data = [
    { id: 1, name: 'Mike', age: 20 },
    { id: 2, name: 'Michael', age: 30 },
    { id: 3, name: 'Kai', age: 28 },
  ];

  return {
    props: {
      data: data,
    },
  };
};

export default AboutPage;

코드를 짧게 짧게 나누어 확인해보겠습니다.

 

import { NextPage } from 'next';

interface Props {
  id: number;
  name: string;
  age: number;
}

먼저 저는 현재 타입 스크립트를 사용하고 있습니다. 그렇기에 interface를 통하여 타입들을 지정해주었습니다.

이는 컴포넌트가 파라미터로 받을 수 있는 타입들을 설정해준 것입니다.

즉 제가 만든 컴포넌트는 props로 id, name 그리고 age를 파라미터로 받을 수 있으며 이때 각각 int, string 그리고 int 타입이어야 합니다.

 

const AboutPage: NextPage<{ data: Props[] }> = ({ data }) => {
  return (
    <div>
      {data.map(({ id, name, age }) => {
        return (
          <div>
            <div>{id}</div>
            <div>{name}</div>
            <div>{age}</div>
          </div>
        );
      })}
    </div>
  );
};

이건 제가 만든 컴포넌트입니다. 컴포넌트의 이름은 AboutPage이며 data 파라미터로 받게 됩니다.

이때 data의 타입은 앞서 언급한 Props interface를 사용합니다. 그리고 []를 사용하고 있습니다.

즉 Array안에 오브젝트를 두겠다는 뜻입니다.  이때 map을 통해서 각각의 key 즉 id, name 그리고 age를 통해서 값을 리턴합니다.

 

 

export const getStaticProps = async () => {
  // const res = await fetch('https://rickandmortyapi.com/api/character');
  // const { results }: Props = await res.json();
  
  const data = [
    { id: 1, name: 'Mike', age: 20 },
    { id: 2, name: 'Michael', age: 30 },
    { id: 3, name: 'Kai', age: 28 },
  ];

  return {
    props: {
      data: data,
    },
  };
};

자 이제 핵심입니다. getStaticProps를 이용하여 클라이언트에게 데이터를 주기 전 데이터 패칭을 한 뒤

정보를 컴포넌트에게 넘겨주고 마지막으로 서버는 렌더링 한 데이터를 넘겨줍니다.

주석은 데이터 패칭을 하는 예시를 적어놓은 것이며, data는 임의의 데이터를 제가 직접 만든 것입니다.

이 데이터는 마지막 props를 통하여 컴포넌트에게 전달됩니다. 저는 data: data라고 코딩하였지만,

현재의 자바/타입 스크립트는 가볍게 data만 주어도 됩니다.

예를 들면 이렇게 말이죠.

  return {
    props: {
      data,
    },
  };

 

그리고 마지막으로

export default AboutPage;

컴포넌트를 export 합니다.

 

일반 React에서는 이러한 기능들을 사용할 필요가 거의 없었습니다.

기본적으로 CSR을 제공하기에 개발자들은 클라이언트에서 데이터 패칭이 이루어질 수 있게 useEffect내에서 사용하는 경우가 많았습니다. 하지만 이는 클라이언트가 데이터 패칭을 볼 수 있다는 큰 단점이있습니다. 이러한 getStaticProps를 이용하여 SSR 중 데이터패칭을 가능하게 하고 이는 클라이언트에게 보이지 않아 보안면에서도 장점을 가지고 있습니다.

 

 

3. 마치며.

 

리액트 시장이 커 저 가며 새로운 여러 프레임워크들도 등장하기 시작했으며 이 중 하나가 Next.JS입니다.

현재 제가 다니는 회사에서도 대대적으로 Next.JS를 이용하여 재구축하려 합니다.

사실 Next.JS는 리액트를 사용하는 프레임워크이기에 일반 리액트와는 크게 차이가 없습니다.

그렇기에 리액트를 사용할 줄 아신다면 Next.JS도 크게 어렵지 않을 것입니다.

앞으로 남아있는 getStaticPaths, getServerSideProps 그리고 Client Side도 차근차근 올려보겠습니다.

 

부지런히 개발 공부하시는 모습이 너무 멋집니다!

오늘도 제 블로그를 방문해주셔서 감사하고 앞으로도 좋은 일만 가득하시길 바라겠습니다.

 

완벽한 준비란 없다, 완벽한 준비란 영원히 시작하지 않는 것과 같다.

Es gibt keine perfekte Vorbereitung.

Perfekte Vorbereitung ist das Gleiche, wie nie anzufangen.