서버 사이드 렌더링

• getStaticPaths 와 getStaticProps 내부에서는 들어오는 실제 요청에 접근 할 수 없었다.
• 유입되는 모든 요청에 대한 페이지를 사전 렌더링 한다.
• 페이지 요청이 서버에 도달할 때마다 실행되는 함수 이다.
• 빌드 시간이나 매초마다 사전 생성 하지 않고, 서버에서만 작동하는 코드이다.
• getServerSideProps 비동기 함수 사용.
• 유저 프로필 페이지에서 어떤 사용자가 접근했는지도 모르는데 사전 렌더링을 할 수 는 없다. → 서버사이드 렌더링을 사용!
• 사전 생성이 아니라, 요청이 들어올때 페이지를 만들어서 클라이언트에 보내준다.

function UserProfilePage(props){
  return <h1>{props.username}</h1>
}

// 이 함수는 배포된 서버와 개발 서버에서만 실행된다.
export async function getServerSideProps(context){
		// context 객체에는 이렇게 3개 들어있다.
		const {params, req, res} = context;

  return {
    props : {
      username : 'Max'
    }
  }
}

export default UserProfilePage;

• 특수데이터나, 쿠키를 보낼때 context 객체를 주로 사용한다.

서버 사이드 렌더링 + 동적 페이지

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

// 서버에서 실행되는 코드
export async function getServerSideProps(context){
  const {params} = context;

  const userId = params.uid;

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

export default UserIdPage;

npm run build 실행

• getStaticProps와 getStaticPaths로 만든 페이지는 총 5개가 나왔고,
• getServerSideProps 사용한 는 페이지를 사전 생성하지 않았다. (람다 기호 두 개가 서버 사이드 렌더)
• 페이지로 요청 할때 getServerSideProps 코드가 실행한다.