개요
Next.js에서 데이터 가져오기는 애플리케이션의 사용 사례에 따라 다른 방식으로 콘텐츠를 렌더링 할 수 있도록 합니다. 이에는 Server-side Rendering 또는 Static Generation으로 사전 렌더링하고, Incremental Static Regeneration으로 런타임에 업데이트하거나 콘텐츠를 만드는 것 등이 포함됩니다.
- SSR(Server-side rendering) : getServerSideProps
- SSG(Static-site generation) : getStaticProps
- Dynamic routing : (getStaticPaths) : getStaticPaths
- ISR(Incremental Static Regeneration)
- CSR(Client-side rendering) : Client side
getServerSideProps
페이지에서 getServerSideProps (서버 사이드 렌더링)라는 함수를 내보내면 Next.js는 getServerSideProps가 반환한 데이터를 사용하여 각 요청마다 이 페이지를 사전 렌더링합니다.
export async function getServerSideProps(context) {
return {
props: {}, // 페이지 컴포넌트에 props로 전달됩니다
};
}참고: 렌더링 유형에 관계없이 모든 props는 페이지 컴포넌트에 전달되며 초기 HTML에서 클라이언트 측에서 볼 수 있습니다. 이는 페이지가 올바르게 hydration되도록합니다. props에 클라이언트에서 사용할 수 없는 중요한 정보를 전달하지 않도록 주의하십시오.
getServerSideProps가 언제 실행되나요?
getServerSideProps는 서버 측에서만 실행되며 브라우저에서는 실행되지 않습니다.
페이지에서 getServerSideProps를 사용하는 경우:
- 직접 이 페이지를 요청할 때,
getServerSideProps는 요청 시간에 실행되고 반환된 props로 이 페이지가 사전 렌더링됩니다. next/link또는next/router를 통해 클라이언트 측 페이지 전환을 요청할 때, Next.js는 서버에 API 요청을 보내고getServerSideProps가 실행됩니다.
getServerSideProps는 페이지를 렌더링하는 데 사용되는 JSON을 반환합니다. 이 모든 작업은 Next.js가 자동으로 처리하므로 getServerSideProps가 정의되어 있다면 추가로 수행할 필요가 없습니다.
next-code-elimination 도구를 사용하여 클라이언트 측 번들에서 Next.js가 제거하는 항목을 검증할 수 있습니다.
getServerSideProps는 페이지에서만 내보낼 수 있습니다. non-page 파일에서는 내보낼 수 없습니다.
getServerSideProps를 페이지 컴포넌트의 속성으로 추가하는 것은 작동하지 않으므로 getServerSideProps를 독립된 함수로 내보내야 합니다.
getServerSideProps API 참조(https://nextjs.org/docs/api-reference/data-fetching/get-server-side-props)는 getServerSideProps에서 사용할 수 있는 모든 매개변수와 props을 다룹니다.
언제 getServerSideProps를 사용해야 할까요?
getServerSideProps는 요청 시간에 가져와야 하는 페이지 데이터를 렌더링해야 할 때만 사용해야 합니다. 이는 데이터의 성격이나 요청의 속성(인증 헤더나 지리적 위치 등) 때문입니다. getServerSideProps를 사용하는 페이지는 요청 시간에 서버 측에서 사전 렌더링되며 캐시된 경우에만 캐시됩니다.
데이터를 요청할 필요가 없는 경우에는 클라이언트 측에서 데이터를 가져오거나 getStaticProps를 고려해야 합니다.
getServerSideProps 또는 API Routes
데이터를 서버에서 가져와야 할 때 API Route를 사용하고, 그 API Route를 getServerSideProps에서 직접 호출하려는 것은 피해야 합니다. 이러한 방식은 getServerSideProps와 API Route가 모두 서버에서 실행되므로 추가 요청이 발생하여 효율성이 저하됩니다.
다음 예제를 살펴보세요. API Route를 사용하여 CMS에서 일부 데이터를 가져옵니다. 그런 다음 getServerSideProps에서 이 API Route를 직접 호출합니다. 이는 성능을 저하시키는 추가 호출을 생성합니다. 대신 getServerSideProps에서 직접 CMS에서 데이터를 가져오는 로직을 가져와서 공유할 수 있습니다.
getServerSideProps with Edge API Routes
getServerSideProps는 Serverless 및 Edge 런타임 모두에서 사용할 수 있으며, 양쪽 모두에서 속성을 설정할 수 있습니다. 그러나 현재 Edge Runtime에서는 응답 개체에 액세스할 수 없습니다. 예를 들어, getServerSideProps에서 쿠키를 추가할 수 없습니다. 응답 개체에 액세스하려면 기본 런타임인 Node.js 런타임을 계속 사용해야 합니다.
다음과 같이 구성을 수정하여 페이지별로 런타임을 명시적으로 설정할 수 있습니다.
export const config = {
runtime: 'nodejs',
};클라이언트 측에서 데이터 가져오기
만약 페이지가 자주 업데이트되는 데이터를 포함하고 있고 데이터를 사전 렌더링할 필요가 없는 경우, 해당 데이터를 클라이언트 측에서 가져올 수 있습니다. 예를 들어 사용자별 데이터가 이에 해당합니다:
먼저 데이터 없이 페이지를 즉시 표시합니다. Static Generation을 사용하여 페이지 일부를 사전 렌더링할 수 있습니다. 누락된 데이터에 대해 로딩 상태를 표시할 수 있습니다.
그런 다음 클라이언트 측에서 데이터를 가져와 준비되면 표시합니다.
이 접근 방식은 예를 들어 사용자 대시보드 페이지에 적합합니다. 대시보드는 비공개이고 사용자별이므로 SEO는 관련이 없으며 페이지를 사전 렌더링할 필요가 없습니다. 데이터는 자주 업데이트되며 요청 시간 데이터 가져오기가 필요합니다.
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://.../data`);
const data = await res.json();
// Pass data to the page via props
return { props: { data } };
}
export default Page;서버 측 렌더링(SSR)으로 캐싱
getServerSideProps에서 동적으로 반환되는 응답을 캐시하려면 Cache-Control 헤더를 사용할 수 있습니다. 예를 들어, stale-while-revalidate을 사용하여 캐시 된 응답을 사용하면서 백그라운드에서 새로 고침 요청을 만들어 최신 값을 채울 수 있습니다.
// 이 값은 10초 동안 새로운 값으로 간주됩니다 (s-maxage = 10).
// 다음 10초 내에 요청이 반복되면 이전에 캐시된 값은 여전히 새로운 값으로 적용됩니다.
// 59초 이전에 요청이 반복되면 캐시된 값은 오래되지만 여전히 렌더링됩니다 (stale-while-revalidate = 59).
//
// 백그라운드에서 새로운 값으로 캐시를 채우기 위해 다시 검증 요청이 생성됩니다.
// 페이지를 새로 고침하면 새로운 값을 볼 수 있습니다.
export async function getServerSideProps({ req, res }) {
res.setHeader(
'Cache-Control',
'public, s-maxage=10, stale-while-revalidate=59'
);
return {
props: {},
};
}caching에 대해 더 자세히 알아보세요.(https://nextjs.org/docs/going-to-production)
getServerSideProps가 에러 페이지를 렌더링 하나요?
getServerSideProps에서 에러가 발생하면, pages/500.js 파일이 표시됩니다. 500 페이지를 만드는 방법은 문서를 참조하세요. 개발 중에는 이 파일이 사용되지 않고 대신 개발자용 오버레이가 표시됩니다.
