[Next.js]getServerSideProps / SSR

프로젝트를 진행하면서 사용자의 요청에 의해서 pre-render된 페이지가 필요할 수 있고 혹은 페이지에서 쿠키정보를 필요로 할때는 사용자의 요청에 의해서 페이지가 pre-render 되어야한다.

getServerSideProps를 사용하게 되면 Next.js는 getServerSideProps에서 반환된 데이터를 사용하여 각 요청에서 페이지를 미리 렌더링 하게 된다.

getServerSideProps는 서버-사이드에서 실행되고 절대로 브라우저단에서 실행되지 않는다.

• 만약 getServerSideProps를 사용한다면 각 요청마다 서버에서 실행되게 되고 이 페이지는 반환되는 props와 함께 미리 렌더링 되게 된다.
• 클라이언트측에서 해당 페이지를 요청하게되면 Next.js는 getServerSideProps를 실행하는 서버에 API 요청을 보내게 된다.

동적 페이지에서 getServerSideProps를 사용하게 된다면 getStaticPaths를 사용하지 않아도 됩니다. 대신 context에서 parmas를 구조분해 해줄 수 있습니다.

function UserIdPage(props) {
  return <h1>{props.id}</h1>;
}

export default UserIdPage;

export async function getServerSideProps(context) {
  const { params } = context;

  const userId = params.uid;

  return {
    props: {
      id: 'userid-' + userId,
    },
  };
}