[ NextJS ] getStaticProps VS getServerSideProps

getStaticProps VS getServerSideProps

 

getStaticProps ( SSG: Static Site Generation )

getStaticProps는 최초 빌드 시에 딱 한번만 호출이 됩니다. 즉, 최초 빌드 시 빌드되는 값이 추후에 수정되는 일이 없는 경우에 사용하기 좋습니다. 

장점은 호출 시 마다 매번 fetch를 하지 않기 때문에 성능면에서는 getServerSideProps보다 좋습니다.

 

export async function getStaticProps() {

    return {
        props: {}
    }
}

 

getServerSideProps ( SSR: Server Side Rendering )

getServerSideProps는 getStaticProps와 다르게 요청이 들어올 때마다 호출되며, 그 때마다 사전 렌더링을 진행합니다.

이 경우, 요청 시마다 다시 호출하기 때문에 빌드 이후 자주 바뀌게 될 동적 데이터가 들어갈 때 사용하기 좋습니다.

 

export async function getServerSideProps() {

    return {
        props: {}
    }
}

getServerSideProps는 서버와 관련된 기능입니다.

getServerSideProps()안에 들어가는 코드는 어떤 코드를 쓰던지 서버에서 작동합니다.

이걸 이용해서 API Key를 숨기는것도 가능합니다. ( BackEnd에서 실행되기 때문입니다. )

 

호출은 _app.js의 component를 호출하고 pageProps에서 호출된다고 생각하면 됩니다.

 

Only absolute URL

getServerSideProps는 서버에서 작동하기 때문에 프론트엔드에서 실행할 때와 다르게 URL이 없기 때문에 fetch를 사용할 때 절대주소를 입력해주어야 합니다.

export async function getServerSideProps() {

    // TypeError: Only absolute URLs are supported
    const { results } = await ( await fetch(`http://localhost:3000/~`)).json();

    return {
        // props key 내부에는 원하는 데이터를 아무거나 넣을 수 있다. ( 무엇을 return하던지 props로써 page에게 주게된다. ex) Home())
        // 이 데이터는 pageProps를 통해 전달된다.
        props: {}
    }
}