Skip to main content

getServerSideProps

getServerSideProps 메서드는 넥스트에서 가장 흔하게 사용되는 데이터 호출 메서드입니다.

getServerSideProps 소개​

getServerSideProps는 페이지 컴포넌트를 그리기 전에 데이터를 받아오기 위한 데이터 호출 메서드입니다. getStaticProps와 다르게 HTTP 헤더나 URL 쿼리스트링 등의 정보를 접근할 수 있어 더 일반적으로 많이 사용됩니다. 무엇보다도 getStaticProps는 애플리케이션을 빌드하는 시점에 실행되지만, getServerSideProps는 사용자의 요청을 받은 애플리케이션 실행 시점에 로직이 실행된다는 차이점이 있습니다.

간단한 코드 예제를 보겠습니다.

pages/login.jsx
export async function getServerSideProps() {
  const res = await fetch('http://my.api/users/1')
  const user = await res.json()
  return { props: { user } }
}
 
export default function LoginPage({ repo }) {
  return (
    return <div>{user.name}</div>
  )
}

위 코드는 사용자가 /login이라는 URL을 접근했을 때 사용자 정보를 받아와 페이지 컴포넌트에 user라는 값을 프롭스로 넘겨주는 코드입니다. 이 코드는 서버에서 실행되기 때문에 브라우저에서는 사용자 정보가 포함된 HTML 파일을 바로 그릴 수 있습니다.

getServerSideProps 특징​

  1. getServerSideProps 메서드는 서버에서 실행됩니다. 따라서, 아래와 같이 메서드 내에서 브라우저 API를 접근할 수 없습니다.
pages/login.jsx
export async function getServerSideProps() {
  const userAgent = window.navigator.userAgent; // 서버에서는 window 객체를 접근할 수 없어 에러 발생
}
 
export default function LoginPage({ repo }) {
  // ...
}
  1. getServerSideProps 메서드는 다른 데이터 호출 메서드와 마찬가지로 페이지 컴포넌트에서만 사용할 수 있습니다.
components/LoginHeader.jsx
export async function getServerSideProps(context) {
  // 일반 컴포넌트에서는 유효하지 않은 메서드
}

export default function LoginHeader() {
  // ...
}
  1. getServerSideProps 메서드에서 동적 라우팅 URL 값과 헤더는 다음과 같은 방식으로 접근합니다.
pages/product/[productId].jsx
export async function getServerSideProps(context) {
  context.params.productId // `product/1`이라는 URL로 접근했을 때, productId 값은 1
  context.req.headers['user-agent'] // 사용자의 접속 디바이스 정보(userAgent)값
}

getServerSideProps 메서드의 첫 번째 파라미터는 context 파라미터입니다. 이 파라미터는 params, req, res, query 등 여러 속성 값을 접근할 수 있습니다. 자세한 내용은 다음 문서를 참고하세요. context API 문서