[Next.js(190)]“getServerSideProps”과 콘텍스트

이유정·2024년 4월 5일
0

Next.js (pages router)

목록 보기
19/51
post-custom-banner


getServerSideProps 함수가 서버에서만 실행된다는게 무슨 말일까 ?


context 객체를 보면 알 수 있다.


getStaticProps 함수는 매개변수 객체나 덜 중요한 부분에 접근하고 끝이다.
getServerSideProps 함수는

  • request 객체 전체에도 접근할 수 있다.
  • response 객체에 접근해서 해당 요청을 조정하거나 header도 추가할 수 있다.

정확히 말하면 context 객체에 든 여러 값과 key를 얻을 수 있고,


여전히 매개변수 객체에도 접근할 수 있다. (동적 컴포넌트 페이지가 있는한 변함 없음(물론 지금 페이지는 아님))

요청 객체와 응답 객체도 얻을 수 있다.
적절한 응답을 얻을 때까지 필요한 만큼 요청 객체를 조종할 수 있다.


요청을 다시 보내는 부분은 걱정하지 않아도 된다.
Next.js가 component를 render 할것임


요청이 가기 전에 조정하는 방법도 있다.

  • 헤더 추가
  • 쿠키 추가


서버에 도달한 요청 객체를 분석해서 거기서 들어오는 data를 읽을 수도 있다.

  • 해당 요청에 attached 헤더
  • 해당 요청에 attached 쿠키 data


지금 받을 요청 객체와 응답 객체는 공식 Node.js 기본 입력 메시지와 응답 객체다.


console.log 로 확인해보자.


사용자 프로필 페이지를 새로고침한 다음


그럼 코드는 다시 실행되는데 이렇게 긴 ~~~ 로그가 뜬다.

  • 두 객체에 내장된 메서드와 프로퍼티가 엄청 많기 때문
    다만, 가령 header가 들어있다면 필요시 추출할 수 있다. (인증절차 때 배움)

특정 데이터에 접근하는게 중요해지는 때

  • 특수 헤더
  • 쿠키 데이터


특정 요청이나 응답 데이터를 필요로 하지 않을 때는 요청 및 응답에 관해 다룰 필요는 없지만 요청이 들어올 때마다 함수가 실행된다는 걸 확인해서 사전에 생성된 정적 함수가 아니라는 걸 확인할 때는 필요하다.

예를들어, 매우 동적인 data가 있다고 하면
데이터가 매초마다 여러번 바뀌게 될테고,
여러분이 어떤 페이지를 제공하던 순식간에 구식 page가 된다.
이럴 때, getServerSideProps 함수를 사용하는 것 !!!!!


사용 방법은 간단하다.
01. 함수에서 serverSide 코드도 작성할 수 있고,

  1. 더미 백엔드에 접근할 수 도 있고,

  1. 컴포넌트 함수에 props 객체를 반환할 수도 있다.

가장 큰 차이는

  • context 객체에 접근할 수 있는 데이터 종류가 다르고,{req, res}
  • 함수가 실행되는 시점이 다르다 !!!!
profile
강의 기록 블로그
post-custom-banner

0개의 댓글