API Call

Next.js는 기본적으로 모든 페이지를 미리 렌더링한다. 미리 렌더링을 하여 html을 생성하게 되면 더 나은 성능과 SEO 이점을 얻을 수 있다.

Next.js에서는 두 가지 형태의 사전 렌더링이 존재

1. 정적 생성: 빌드 시에 페이지를 HTML로 만들어 요청시 제공한다.
2. 서버 사이드 렌더링: 페이지 요청 시, 서버 사이드 렌더링을 통하여 HTML을 제공한다.

외부 데이터를 필요로 하지 않는다면, Next.js는 빌드 시에 페이지를 렌더링하여 요청시마다 제공한다.(정적 생성)

외부 데이터를 필요로 한다면, 서버 사이드 렌더링을 통하여 외부 데이터를 이용하여 렌더링을 한 후 HTML을 제공한다.

getServerSideProps

Next.js는 getServerSideProps라는 페이지의 데이터를 서버로부터 제공받는 기본 API를 가지고 있음.

서버에서 데이터를 Fetch하여 초기 데이터를 전달하도록 구성

서버 측에서 props를 받아오는 기능을 하게됨.

페이지를 요청할 때마다 미리 실행되어서 Page 컴포넌트의 props로 넘겨주게 됨.

export default function Home({user}) { // 미리 실행된 getServerSideProps() 함수의 결과 값을 props로 넘겨받음.
    const username = user && user.name;
    return (
        <div>
            {username}
        </div>
    )
}

// 미리 실행됨 
export const getServerSideProps = async () =>{
    try {
        const res = await fetch('https://api.github.com/users/raccoonback')
        if(res.status === 200) {
            const user = await res.json()
            return { // 결과를 Home 컴포넌트의 props로 넘겨줌 
                props: {user} 
            }
        }
    } catch (e) {
        console.error(e)
        return { // 결과를 Home 컴포넌트의 props로 넘겨줌 
            props: {}
        }
    }
}

getServerSideProps 에서 반환한 props 값들은 페이지의 props로 전달되게 된다.

getStaticProps

getStaticProps는 getServerSideProps와 다르게 빌드 시에 데이터를 불러와 결과를 json으로 저장하여 사용하게 됨. 즉, 일관된 데이터를 보여주게 됨.

사전 렌더링된 html에 날짜 데이터가 들어가 있는 것을 확인할 수 있다.

뿐만 아니라, next build && next start 명령어를 통해 빌드하여 실행하게 되면 새로고침 이후에도 데이터가 갱신되지 않는 것을 확인할 수 있다.

9.5 버전부터는 revalidate: 시간(초) option을 주면 주어진 시간(초)마다 갱신되도록 설정할 수 있다.

getStaticPaths

getStaticPaths 이용하여 미리 paths를 지정할 수 있다. 즉, 해당 경로가 외부 데이터에 의존할 때 사용한다.