NextJS에서 Component 호출 할 때 getServerSideProps 호출 방법이 있나요?

Question

JSTL 이나 Thymeleaf 하다가 NextJS 하려니 많이 해메고 있네요. @,@;;; 우선 시나리오는 ProductList.html 페이지에서 서버로부터 상품 목록 주욱 받아 화면 출력 하는 것 까지는 했어요. 이때 서버 목록은 getServerSideProps 함수에서 받아 처리 했구요. 이제 상품 이름 클릭 했을 때 상세 정보를 Layer 화면으로 띄우려는데 그게 잘 안되네요. Thymeleaf에선 해당 페이지만 빌드 돼 html 형태로 받아 올 수 있었는데 nextjs는 어떻게 해야 하는지 모르겠어요. // 상품 상세 내용 export default function ProductModalLayer({ product }:IProduct) { return (

{product.name}

); } export async function getServerSideProps(context: any) { // 서버 통신으로 product 상세 정보 전달 const data = ... 생략... return { props: { product: data, }, }; } ------ ProductList 부분에서 상품 이름을 클릭 했을 때 const ModalView = dynamic(() => import(../ProductModal.layer)); // 선언 ... // 화면 그리기 이런 형식으로 호출 하니까 getServerSideProps를 호출 하지 않네요. 다른 방법으로 fetch를 이용해 호출 해 봤는데 const res = await fetch(/ProductModal.layer?seq= + seq); const content = await res.text(); 이렇게 하면 getServerSideProps를 호출 하지만 html Tag가 엄청 붙어 나오고 return 의 결과가 아닙니다. getServerSideProps를 고집 하는 이유는 서버 호출 인터페이스는 꼭 서버에서 이뤄지게 하고 싶어서에요. 브라우져 디버거로 노출 안되게 하고 싶어서. 힌트나 방법좀 부탁 드려요~ 다시 JSTL 이나 Thymeleaf로 돌아 갈 수 없어~~~~

김재성 · Answer

https://nextjs.org/docs/pages/building-your-application/data-fetching/get-server-side-props#when-does-getserversideprops-run

getServerSideProps 가 호출되는 경우는 크게 두 가지입니다.

1. 브라우저 주소창에 url을 입력하여 직접 next.js 서버에 페이지를 요청했을 때
2. (next/link) Link 컴포넌트를 클릭하거나 (next/router) router.push, router.replace 를 호출함으로써 페이지로 이동할 때 - 단, shallow 옵션이 false 여야 합니다.

따라서 말씀하신 경우에 상품 이름을 클릭했을 때 router.push 혹은 replace 를 같은 주소 경로로 호출하되, 상세 정보를 불러와서 모달을 띄워야 하는지 말아야 하는지 여부를 추가적인 쿼리 파라미터로 넘겨주면 될 거 같긴 합니다(단, 페이지 전체가 다시 로드 되는지 아닌지 여부는 모르겠습니다. 이 패턴을 사용해보지는 않아서).

getServerSideProps can only be exported from a page. You can’t export it from non-page files.

또한 문서에 따르면 페이지가 아닌 컴포넌트에 대해 getServerSideProps 를 정의할 수 있는 방법은 없습니다.