<aside> 🧑🏻‍🏫 앞 절에서 언급한 것처럼 각 페이지마다 어떤 방식으로 데이터를 가져올지 전략을 짜야 합니다. 데이터를 가져오는 Next.js의 메서드에 따라 렌더링 방식이 결정되기 때문입니다.

다시 한 번 정리하면 데이터가 필요한 페이지에서 빌드시점에 HTML을 정적으로 생성하고 싶으면 getStaticProps, **getStaticPaths**를, 서버요청(페이지 접근) 때마다 서버측에서 HTML을 매번 동적으로 생성하고 싶으면 getServerSideProps 메서드를 사용합니다.

</aside>

Next.js에서 CSR인지, SSR인지 판단하기?

콘솔로 확인 가능! 왼) Next.js를 실행시킨 터미널(Node서버) | 우) 브라우저 콘솔

콘솔로 확인 가능! 왼) Next.js를 실행시킨 터미널(Node서버) | 우) 브라우저 콘솔

• Next.js의 코드는 서버에서도 실행되고 클라이언트에서도 실행됩니다.
  • 이런 것을 동형(isomorphic) 이라고 표현합니다.
  • 그래서 브라우저에서만 사용할 수 있는 window 변수나 Node.js 환경에서만 사용할 수 있는 process 변수등을 사용하면 안 됩니다.
• 두 가지 환경에서 실행되는 코드인데, 실행되는 시점이 클라이언트(브라우저)인지, 서버인지 어떻게 알 수 있을까요?
  • 콘솔을 출력하면 쉽게 알 수 있습니다.
  • 클라이언트 환경에서 실행되면 브라우저 콘솔창에 정보가 출력되고, 서버 환경에서 실행되었으면 Next.js를 시작시킨 터미널에서 정보가 출력됩니다.

Next.js에서 fetch는 사용할 수 없다.

• CRA에서는 데이터를 가져오기 위해 HTTP 통신을 할 때, Web API(자바스크립트 내장 함수)인 fetch 함수를 사용할 수 있습니다.
  • 하지만, fetch 함수는 Web API이기 때문에 브라우저에서만 실행되고, 서버측에서 실행되는 경우에는 없는 함수를 호출했다고 에러가 납니다.
  • 클라이언트와 서버측 모두 api를 호출할 수 있어야 하기 때문에 실무에서 가장 많이 사용하는 axios를 사용하는 것이 좋습니다.

getStaticProps

getStaticProps는 빌드 시점에 api를 호출하고 데이터를 응답 받아서 HTML 을 완성하는 정적생성을 위한 메서드입니다. 타입스크립트를 사용할 때 아래와 같이 추가하면 됩니다.

import { GetStaticProps } from 'next'

export const getStaticProps: GetStaticProps = async context => {
	// 생략
}

getStaticPaths

동적라우트인 페이지이면서 정적으로 페이지를 생성하고 싶을 때 사용하는 메서드입니다. 데이터가 바뀌지 않는 상세페이지에서 사용할 수 있습니다. 하지만 일반적으로 상세 페이지에서 정보는 자주 바뀔 수도 있으므로(ex. 맛집찾기 사이트 - 식당 상세 페이지에서 별점, 댓글, 사진 등이 자주 바뀔 수 있음) 동적으로 생성하는 것이 맞겠지만, 메서드 연습 차원으로 사용하고 분석해보세요.