Nextjs) getStaticProps()

어떤 경우에 사용할까?

pre-rendering시에 fetch 된 data를 써야할 때 사용한다
data를 fetch해서 화면에 뿌려주는 경우를 생각해보자.

import MeetupList from '../components/meetups/MeetupList';
import {useState} from 'react';
const dummy_meetup = [ // 예시 데이터
    {
        id:'m1',
        image:'https://cdn.pixabay.com/photo/2021/04/29/11/40/big-ben-6216420_960_720.jpg',
        title:'시계탑공원',
        address:'호주',
        description:'first meet up'
    },

    {
        id:'m2',
        image:'https://cdn.pixabay.com/photo/2021/04/29/11/40/big-ben-6216420_960_720.jpg',
        title:'시계탑공원',
        address:'호주',
        description:'second meet up'
    }
];

function Homepage() {
  const [meetups,setMeetups] = useState([]);
    return <MeetupList meetups ={meetups}></MeetupList>
}

export default Homepage;

보통 위와같이 useState를 사용하여 useEffect에서 fetch 작업을 할 것이다.
하지만 클라의 useEffect에서 fetch요청을 하게되면, 서버에서 빈페이지를 받기때문에, 검색엔진 최적화(SEO)가 되지않는다.

SEO문제를 어떻게 극복할 수 있을까?

pre-rendering을 사용하되, 첫 화면을 렌더링 하기전에 데이터를 요청하여 받는 방법을 택 할 수 있다.
next.js 에서는 상황에 따라 두가지 방법을 사용할 수 있다.
1.getStaticProps
2.getServerSideProps
1번에 대해서 알아보자.

1. getStaticProps()

• nextjs가 내부적으로, build process 단계에서 해당함수를 실행해준다.(pre-rendering cycle 전에)
  생성된 정적페이지는, 요청이 있을 때마다 해당 페이지는 reused 되고 cache 를 통해 빠르게 클라이언트로 보내진다.

사용예시)
getStaticProps 을 async함수로 선언하고, 안에서 fetch 작업을 돌린다. getStaticProps의 return값으로, fetch된 데이터를 반환하면, 이 리턴값이 컴포넌트의 prop으로 전달된다.
즉 첫렌더링시에 컴포넌트는 props로 fetch된 데이터를 받아올수 있다.

예시코드)

import MeetupList from '../components/meetups/MeetupList';


function Homepage(props) {
    return <MeetupList meetups ={props.meetups}></MeetupList>
}

export async function getStaticProps() {
  	const response = await fetch();
  	const data = await response.json();
    return { 
        props:{
            meetups:data
        }
    }
}

export default Homepage;

1-1. revalidate property

getStaticProps를 사용하게되면, 빌드시 최초로 실행되므로, 만약 프론트엔드에서 data fetch를 새로 하지않으면 계속 옛날 데이터를 보여줄것이다.(데이터가 고정된다)
따라서 revalidate라는 property를 이용해서, 자동으로 업데이트 하도록 할 수 있다.(요청이 있을때 마다, 정적페이지를 지정된 시간마다 생성한다.)
ex)

export async function getStaticProps() {

    return { 
        props:{
            meetups:dummy_meetup
        },
        revalidate:3  //3초
    }
}

2. getServerSideProps()

1번과 다르게, build 시 호출이 아니라 매 요청마다, 서버단에서 실행되고 화면을 동적으로 렌더링한다.
따라서 revalidate 속성이 필요가 없다.
단점: 매 생성시마다 렌더링하고 fetch하는 시간이 필요함.

보통은 1번의 방법이 re-used 되고 cached 되므로, regenerate가 베이스인 2번째 방법보다 빠르고 좋다. (req,res에 접근할필요가있거나 데이터가 자주바뀌는경우를 빼면)
ex)

export async function getServerSideProps(context) {
    // fetch data from an API, 
    // here, runs in server  
    const req = context.req;
    const res = context.res;
    
    return {
        props: {
            meetups:dummy_meetup
        }
    }
}