[Next.js] getServerSideProps 에서 undefined 반환 이유

# getServerSideProps 에서 undefined 가 반환되는 이유

Next.js 의 getServerSideProps은 오직 Pages 폴더에 있는 페이지 컴포넌트에서만 사용 가능하다.

 

즉, pages 외부 경로(src/components 등) 에 위치한 컴포넌트에서 getServerSideProps사용시,

호출 자체가 정상적으로 되지 않아 SSR이 작동하지 않는다.

 

따라서 아래와 같이 데이터를 받아서 사용하려 해도

애초에 받는게 없으니 undefined 로 찍힐 수 밖에 없다.

type PropsType = {
  message: string;
};

// pages 외부의 컴포넌트
function Test({ message }: PropsType) {
  console.log(message); // undefined : 애초에 받는게 없음
  return (
    <>
      <p>{message}</p>
    </>
  );
}

// pages 외부의 컴포넌트에서 사용시, 호출 자체가 정상적으로 안됨
export const getServerSideProps: GetServerSideProps = async (context) => {
  const data = '내부 데이터 생성'; // 실행 자체가 안됨
  console.log('data:', data); // 실행 자체가 안됨

  return { props: { message: `SSR로 보낸 데이터입니다.` } }; // 전송 자체가 안됨
};

export default Test;

 

애초에 공식문서의 첫 문장이 아래와 같다.

If you export a function called getServerSideProps (Server-Side Rendering) from a page, Next.js will pre-render this page on each request using the data returned by getServerSideProps.

 

getStaticProps 또한 아래와 같이 가이드 된다.

Only Allowed in a Page
getStaticProps can only be exported from a page. 
You can’t export it from non-page files.

 

getServerSideProps와 getStaticProps을 page에서만 사용할 수 있는 이유도 적혀있다.

One of the reasons for this restriction is that React needs to have all the required data before the page is rendered.

페이지가 렌더링 되기 전에 미리 데이터를 받아서 리액트 컴포넌트에 전달해야 하기 때문에,

오직 페이지에서만 사용이 가능하다고 한다.

 

즉, page 에 해당하는 컴포넌트에서만!

getServerSideProps, getStaticProps 메서드를 생성하고 export 할 수 있다.

그래야 정상적으로 SSR이 작동한다.