2023.06.16[nextjs - query ]

📖오늘 배운  것

 

query undefined

페이지에서 router로 query를 받아와서 사용하는 부분이 있었다. 그런데 새로고침하면 해당 query 값이 사라져서 undefined가 되어 데이터 패치에 실패하는 버그가 발생했다.

아마 next router에서 query 값을 유지 못하거나 query 값을 받아오기도 전에 패치해버리거나... 원인은 정확히 몰라서 더 찾아봐야 할 것 같다.

 

데이터 패치는 csr로 하고 있었는데 이를 해결하기 위한 방법으로는 ssr를 활용하는 방법이 있었다.

 

❗쿼리 값을 ssr로 받아와서 컴포넌트가 마운트되기 전에 받아오는 방법

export const getServerSideProps: GetServerSideProps = ({ query: { id } }) => {
  return {
    props: {
      id,
    },
  };
}

위의 방법을 사용해서 해결했다! 그런데 이외에도 props로 아무것도 지정하지 않아도 해결된다고 한다. props로 지정하지 않는데 어떻게 해결되는건지... 일단 getServerSideProps를 사용하면서 query 값을 먼저 받아오기 때문에 props를 리턴하지 않아도 undefined가 뜨는 것 같다는 예상이 든다. 자세한 건 더 공부해봐야 할 것 같다!

 

 

그리고 프로젝트에 타입스크립트를 적용 중이어서 최종적으로 아래와 같은 코드로 사용했다.

✅최종

export const getServerSideProps: GetServerSideProps = ({
  query: { groupId },
}) => {
  return Promise.resolve({
    props: {
      groupId: groupId as string,
    },
  });
};

GetServerSideProps는 Promise를 리턴해야하기 때문에 위와같이 리턴값을 Promise로 감싸주어 타입오류를 해결하였다.

 

 

 

 

💭배운 점

nextJS 할만한데?! 라고 생각할 때마다 기가막히게 고난과 시련이 찾아온다. 

자만하지 말라는 하늘의 뜻인가보다..ㅋㅋㅋㅋ 덕분에 nextJS에서 어떤 것들을 고려해야하는지 더 배워가고 있는 것 같다.

그만큼 트러블 슈팅도 많이 겪고 있는데 이번에도 개발 기간이 바빠도 문서화를 놓치지 않으려고 한다! 정제되게 작성하지 않고 날 것 그대로 작성하고 있지만 나중에 다시 정리하면서 하나씩 더 자세하게 포스팅해보고 싶다.

겪였던 트러블 슈팅들