[Next.js] 5. Data Fetching(데이터 가져오기) - getServerSideProps

getServerSideProps

gerServerSideProps 함수를 호출하게 되면 반환된 데이터를 사용하여 각 요청에 미리 페이지를 렌더링 하게 된다.

export async function getServerSideProps(context{
	return{
    	props:{}	
    }
}

 

 

getServerSideProps는 언제 실행될까?

gerServerSideProps는 오직 서버사이드에서만 실행되고 브라우저에서는 실행되지 않는다.

• 만약 페이지에 요청이 들어오면, getServerSideProps는 요청 시간에 실행되고 반환된 값으로 미리 렌더링을 한다.
• 만약 현재 페이지를 `next/link`나 `next/router`와 같은 클라이언트 사이드 페이지 이동을 통해 요청했을 경우

getStaticProps나 getStaticPaths와 마찬가지로 getServerSideProps 또한 컴포넌트 아닌 페이지에서만 내보내기가 가능하다.

 

 

getServerSideProps는 언제 사용해야 할까?

getServerSideProps는 요청이 있을 때마다 데이터를 가져와서 페이지를 렌더링 해야 할 때 사용한다.

굳이 요청마다 데이터를 가져올 필요가 없다면 클라이언트 사이드나 getStaticProps를 사용하면 된다.

 

 

getServerSideProps or API Routes

서버로부터 데이터를 가져올 때, Next.js의 API Route를 사용하고 getServerSideProps에서 그 API Route를 호출하는 방법을 시도할 수 있다. 하지만 이는 API Routes와 getServerSideProps 둘 다 서버에서 실행되어 불필요하고 비효율적인 요청을 추가적으로 발생하게 한다.

예를 들어, API route가 CMS에서 데이터를 가져오고 그 API route를 getServerSideProps에서 다시 호출한다. 이 과정은 두 번의 호출뿐만 아니라 효율성도 떨어진다. 대신에 getServerSideProps가 직접 CMS, database등에서 데이터를 가져오는 방식을 사용하는 것이 효율적이다. 다시 말하면 굳이 API Routes를 사용하지 않고 getServerSideProps 안에서 데이터를 직접 가져오는 게 효율적이란 소리다.

 

 

Fetching data on the client side

만약 페이지의 데이터가 지속적으로 변하고 미리 렌더링 할 필요가 없다면 클라이언트 사이드에서 데이터를 가져오면 된다.

예를 들면

• 첫 번째로 데이터가 없는 페이지를 즉시 보여준다. 페이지의 몇몇 부분은 정적 생성으로 미리 렌더링 될 수 있고 데이터가 올 때까지 로딩 화면을 보여준다.
• 그러고 나서 클라이언트 사이드에서 데이터를 가져와 데이터가 준비되면 보여주면 된다.

이는 마치 react의 useEffect hook에서 데이터를 가져와서 뿌려주는 개념과 비슷하다. 대시보드나 어드민처럼 특정 사용자만 쓰고, SEO나 미리 렌더링 될 필요가 없는 경우 사용하면 된다. 

 

 

Using getServerSideProps to fetch data at request time

다음은 getServerSideProps를 사용하여 데이터를 가져오는 예시이다

function Page({data}){
	//Render data...
}

//This gets called on every request
export async function getServerSideProps(){
	//Fetch data from external API
    const res = await fetch(`https://.../api`)
    const data = await res.json()
    
    //Pass data to the page via props
    return { props: { data } }
}

export default Page

 

 

Caching with Server-Side Rendering(SSR)

getServerSideProps 내에서 `Cache-Control`을 통해 요청에 대한 응답을 캐시 할 수 있다.

예를 들어, 응답 값의 유효기간을 10초(s-maxage)로 하면 10초 안에 요청이 다시 들어오면 별도의 검증 없이 그대로 반환한다.

59초(stale-while-revalidate) 안에 요청이 들어오면 이미 오래된 캐시 값이지만 반환한다. 60 이후에 들어온 값은 다시 서버에 요청하게 된다.

export async function getServerSideProps({ req, res }){
	res.setHeader(
    	'Cache-Control',
        'public, s-maxage=10, stale-while-revalidate=59'
    )
}