# 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이 작동한다.
'개발(Development) > React(리액트)' 카테고리의 다른 글
[React] 모달창(Modal) 초간단 구현 방법(리덕스, 라이브러리 X) (0) | 2022.08.16 |
---|---|
[React] useLocation 으로 쿼리 파라미터 취득 방법(URLSearchParams 활용) (0) | 2022.08.16 |
[React] JSX 특수 문자/기호 입력 방법(꺽쇠, 괄호, 슬래시 등) (0) | 2022.08.15 |
[Next.js] Link 라우팅 : 현재경로 active CSS 스타일링 (0) | 2022.08.14 |
[React] TypeScript useRef 사용법 (+ ref 객체 타입) (0) | 2022.08.11 |
댓글