SSR: getServerSideProps

export async function getServerSideProps(context) {
  return {
    props: {}, // will be passed to the page component as props
  }
}

If you export a function called getServerSideProps (Server-Side Rendering) from a page, Next.js will pre-render this page on each request using the data returned by getServerSideProps.

페이지에서 getServerSideProps라는 함수를 export 한다면 Next.js는 getServerSideProps 함수로부터 반환된 데이터를 사용해, 각 요청에 대해 해당 페이지를 사전 렌더링 한다.

Note that irrespective of rendering type, any props will be passed to the page component and can be viewed on the client-side in the initial HTML. This is to allow the page to be hydrated correctly. Make sure that you don't pass any sensitive information that shouldn't be available on the client in props.

렌더링 유형에 관계없이, 어떤 props든 페이지 컴포넌트로 전달되고 client-side의 초기 HTML에서 확인할 수 있다.
이것은 페이지가 올바르게 hydration 하기 위함이다.
따라서 민감한 정보일 경우 client에 props로 넘기지 말아야 한다.


(+ hydration : 사전 렌더링 과정을 거치면 페이지의 HTML은 미리 만들어지는데 이때 페이지에 필요한 최소한의 JS 코드들이 포함된다. 이후 페이지가 브라우저에 의해 로드될 때 이 JS 코드가 동작해 페이지를 완전히 상호작용할 수 있게 만든다.)

When does getServerSideProps run

getServerSideProps only runs on server-side and never runs on the browser.
If a page uses getServerSideProps, then:

• When you request this page directly, getServerSideProps runs at request time, and this page will be pre-rendered with the returned props
• When you request this page on client-side page transitions through next/link or next/router, Next.js sends an API request to the server, which runs getServerSideProps

getServerSideProps는 오로지 서버 측에서만 실행되며 브라우저 위에서는 실행되지 않는다.

만약 페이지에 getServerSideProps를 사용한다면,

• 페이지를 바로 요청할 때, getServerSideProps는 요청 시간에 호출되며 페이지는 반환된 props와 함께 사전 렌더링 된다.
• next/link나 next/router와 같이 클라이언트 측의 페이지 변경을 통해 페이지를 요청하는 경우 Next.js는 getServerSideProps 함수를 호출하는 서버에 api 요청을 보낸다.

getServerSideProps returns JSON which will be used to render the page. All this work will be handled automatically by Next.js, so you don’t need to do anything extra as long as you have getServerSideProps defined.

getServerSideProps는 페이지 렌더에 필요한 JSON을 반환한다.
모든 작업은 Next.js에 의해서 자동으로 이루어지기 때문에 getServerSideProps에 대해 추가적으로 정의할 필요가 없다.

getServerSideProps can only be exported from a page. You can’t export it from non-page files.

getServerSideProps는 반드시 page에서 export되어야 한다.
다시 말하자면 page 파일이 아닌 곳에서는 getServerSideProps를 export할 수 없다.

Note that you must export getServerSideProps as a standalone function — it will not work if you add getServerSideProps as a property of the page component.

그리고 반드시 getServerSideProps는 독립 실행형 함수로 export해야 한다.
만약 페이지 컴포넌트의 속성으로 getServerSideProps 함수를 추가했다면 동작하지 않을 것이다.

When should I use getServerSideProps

You should use getServerSideProps only if you need to render a page whose data must be fetched at request time. This could be due to the nature of the data or properties of the request (such as authorization headers or geo location).
Pages using getServerSideProps will be server side rendered at request time and only be cached if cache-control headers are configured.
If you do not need to render the data during the request, then you should consider fetching data on the client side or getStaticProps.

요청 시 데이터를 가져와야 하는 페이지를 렌더링할 경우에만 getServerSideProps를 사용할 수 있다.
이것은 데이터의 특성 또는 api 요청의 속성(authorization header나 geo location) 때문일 수도 있다.

getServerSideProps를 사용하는 페이지는 요청 시 서버 측에서 렌더링될 것이며 cache-control headers가 구성된 경우에만 캐시된다.

만약 요청 동안 data를 렌더링할 필요가 없다면 client 측에서 data를 가져오도록 하거나 getStaticProps를 사용하는 것을 권장한다.

getServerSideProps or API Routes

It can be tempting to reach for an API Route when you want to fetch data from the server, then call that API route from getServerSideProps. This is an unnecessary and inefficient approach, as it will cause an extra request to be made due to both getServerSideProps and API Routes running on the server.

서버에서 데이터를 가져온 다음 getServerSideProps에서 api route를 호출하고 싶을 수 있다.
그러나 이 방법은 불필요하고 비효율적인 접근 방식인데, getServerSideProps와 서버에서 실행되는 api route로 인해 추가적인 요청이 발생하기 때문이다.

Take the following example. An API route is used to fetch some data from a CMS. That API route is then called directly from getServerSideProps. This produces an additional call, reducing performance.
Instead, directly import the logic used inside your API Route into getServerSideProps. This could mean calling a CMS, database, or other API directly from inside getServerSideProps.

CMS로부터 데이터를 가져오는 api route가 있다고 하자.
api route는 getServerSideProps에서 직접 호출된다.
이 과정에서 추가적인 호출이 발생되고 성능이 저하된다.

성능 저하를 막기 위한 방법으로는 api route에서 사용되는 로직을 getServerSideProps 함수 내로 가져오는 방법이 있다.
그러면 getServerSideProps 함수 내에서 CMS, 데이터베이스, 다른 api 등을 직접 호출할 수 있다.

Using getServerSideProps to fetch data at request time

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

Caching with Server-Side Rendering (SSR)

// This value is considered fresh for ten seconds (s-maxage=10).
// If a request is repeated within the next 10 seconds, the previously
// cached value will still be fresh. If the request is repeated before 59 seconds,
// the cached value will be stale but still render (stale-while-revalidate=59).
//
// In the background, a revalidation request will be made to populate the cache
// with a fresh value. If you refresh the page, you will see the new value.
export async function getServerSideProps({ req, res }) {
  res.setHeader(
    'Cache-Control',
    'public, s-maxage=10, stale-while-revalidate=59'
  )

  return {
    props: {},
  }
}

getServerSideProps 내에 caching headers(Cache-Control)을 사용하여 동적 응답을 캐시할 수 있다.

Does getServerSideProps render an error page

If an error is thrown inside getServerSideProps, it will show the pages/500.js file. Check out the documentation for 500 page to learn more on how to create it. During development this file will not be used and the dev overlay will be shown instead.

만약 getServerSideProps 내에서 에러가 발생한다면 pages/500.js 파일을 보여줄 것이다.

📎 관련 링크

Next.js 공식문서