[Next.js] Data Fetching - getStaticProps / SSG / Static-site Generation

Yong·2022년 5월 11일

Next.js

목록 보기

3/8

Pre-rendering

리액트 렌더링 방식

리액트에서 페이지가 렌더링 될때 사이클이 두번 돌게 됩니다.

const HomePage = () => {
  const [someStates, setSomeStates] = useState([]);
  useEffect(() => {
		// 데이터를 가져온다고 한다고 가정한다. 
    setSomeStates(DUMMY_DATA);
  }, []);

  return <List fetchData={someStates} />;
};

export default HomePage;

위 코드처럼 useEffect 훅을 통해서 데이터를 가져오는 코드가 있습니다. 페이지가 렌더링 될 때 컴포넌트 함수가 먼저 실행이 될것이고 useEffect가 실행이 되면서 state가 변경될 것입니다. state가 변경이 되면서 페이지는 다시 한번 랜더링이 됩니다.

Next.js에서 리액트 렌더링 방식의 문제점

'someStates'는 처음 초기 state인 '빈 배열'이 되겠죠. 이게 왜 문제일까요?
첫번째로는 초기 state로 Pre-rendering된 페이지에서는 데이터를 fetch하면서 시간이 걸린다는 문제점이 있습니다. 사용자 경험에 있어서는 단점이 되는 부분입니다.
두번째로는 SEO 최적화를 할 수 없습니다.

해결 방법

1. SSG (Static Site Generation)

Static Generation은 APP을 배포하기 위해 빌드할때 페이지를 Pre-rendering 하는 방법입니다. 하지만 자주 데이터의 업데이트가 일어나는 페이지라면 적합하지 않을 수 있습니다.

const HomePage = (props) => {
  return <List fetchData={props.someStates} />;
};

export async function getStaticProps() {

  // 데이터 가져오는 코드가 들어가는 곳
  
  return {
    props: {
      someStates: DUMMY_DATA,
    }, // 페이지 컴포넌트에 props로 전달이 된다.
  };
}

export default HomePage;