[Next.js(175)] 페이지에 “getStaticProps” 추가하기

이유정·2024년 3월 25일
0

Next.js (pages router)

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

특징

  • getStaticProps 함수는 모든 "page 파일"에 추가 할 수 있다.
  • export를 해야한다.
    => Next.js가 페이지를 사전 생성할 때 사용자를 대신하여 이 getStaticProps 함수도 호출한다.
  • 이 함수는 해당 페이지가 사전 생성되어야 하는 페이지임을 Next.js에게 알려주는 것.
  • Next.js는 기본값으로 모든 페이지를 사전 렌더링하지만 Next.js가 페이지를 사전에 렌더링하지 않게 하는 법도 있음. 따라서 getStaticProps가 Next.js 한테 Next.js가 이 페이지를 여전히 사전 렌더링 하도록 해야 한다는 것을 말해준다는 것을 이해하자.
  • Next.js가 컴포넌트를 실행하고 JSX 코드를 반환하는 것 이외에도, 컴포넌트 파일에서 getStaticProps 함수를 찾으면 그 함수도 호출한다.


useEffect를 사용하지 않고 데이터를 로드해보자.

data 폴더를 만들어서 그 안에 더미데이터 파일을 넣었다.

페이지가 로드된 후에만 client side에서 전송되는 http 요청 대신,
컴포넌트 페이지를 사전 렌더링하기 전에 Next.js가 데이터를 prefetch 해야 한다.

  • getStaticProps는 필수적으로, props를 key로 설정하고 객체를 반환해야 한다.
  • getStaticProps 함수 먼저 실행한 후 이 데이터(props)를 HomePage 컴포넌트한테 주는 것임.

  • props 키의 데이터는 개발자가 설정하지만 객체이어야 한다.

  • 여기서는 배열을 보유하고 있는 products가 key 이고, 배열은 객체를 가지고 있음.

  • getStaticProps 함수랑 HomePage 함수 실행 모두 미리 수행하기 때문에 client side에서는 두 코드 모두 실행되지 않는다. 빌드시간이나 사용중인 개발 서버의 일부로 개발중에 발생한다.


이렇게 작성하면,

title인 Product 1이 보이는 것을 확인 할 수 있다.


페이지 소스를 보면 Product 1이 있는 것을 확인할 수 있다. => client 에게 보내진 페이지의 일부라는 뜻 => 즉, Product 데이터 페칭은 client에서 발생한게 아니다. 서버에서 발생한 것 !

개발자 도구의 Sources 탭으로 가서 js 코드 파일을 보면
이 밑에 코드는 아무 곳에서도 보이지 않을 것이다. client side에 제공되는 코드가 아니기 때문임

getStaticProps 코드가 client side에서 실행되지 않기 때문에 서버 측 작업을 수행할 수 있다.
ex1) 사용자가 볼 수 없는 credential을 쓸 수 있고,
ex2) 파일 시스템에 접근하는 코드와 같이 브라우저에서 작동하지 않는 코드도 실행할 수 있다.

profile
강의 기록 블로그
post-custom-banner

0개의 댓글