Next JS 동적라우팅 새로 고침 시 동적 데이터 사라지는 현상 Troubleshouting

현재 발생 문제

다이나믹 라우팅 페이지에 넘겨진 데이터에 따라 페이지를 보여주고 있다.
그런데 페이지 이동이 정상적으로 이루어졌다고 생각했지만, 새로고침 클릭시 런타임 오류가 발생하여, 데이터가 로드되지 않았다.
백엔드 파일의 오류를 보니, 넘겨진 데이터가 undefined 상태였다.
넘겨진 데이터가 처음에는 정상적으로 이동되었지만, 새로고침 클릭 시 데이터가 사라져버린 것이다.

-> 위의 C_IDX = NaN 부분이 넘겨진 데이터인데, 새로고침시에 오류가 발생하였다.

처음 입장 시 화면

새로 고침 시 오류 화면

---

문제 발생 이유

동적 라우팅 경로 : clubDetailPage/[C_IDX].tsx인 동적인 경로인데, Next JS에서는 getServerSideProps를 사용하지 않으면 동적 사이트가 아니라 정적 사이트로 판단한다.

그래서 prerendering의 결과로 router.query의 데이터가 undefined 상태가 되어버린 것입니다.

---

문제 해결 방안 및 코드 리팩토링

-> 위에서 언급했듯이 동적 경로임을 Next에 알려줄 필요가 있습니다. 그래서 getServerSideProps를 동적 페이지 밑에 넣어주면 해결됩니다.

아래 코드를 동적 페이지 아래에 추가해주자

export const getServerSideProps: GetServerSideProps = async ({ params }) => {
  const data = params;
  return {
    props: {
      data,
    },
  };
};

완성 코드

// [C_IDX].tsx 
import AttendUser from "@/components/clubDetailpage/AttendUser";
import { GetServerSideProps } from "next";

import ClubDetailSideBar from "@/components/clubDetailpage/ClubDetailSideBar";
const ClubPostPage = () => {
  return (
    <div className="flex mx-auto w-2/3  ">
      <div className="w-2/12">
        <ClubDetailSideBar />
      </div>
      <div className="w-10/12">
        <AttendUser />
      </div>
    </div>
  );
};

export default ClubPostPage;

//
export const getServerSideProps: GetServerSideProps = async ({ params }) => {
  const data = params;
  return {
    props: {
      data,
    },
  };
};

---

느낀점

이전에 동적 라우팅의 데이터 변화에 따라서 리렌더링이 발생하지 않아서 useEffect와 useState를 이용해 리렌더링을 발생시켜서 해결한 적이 있습니다.
지금 발생한 문제를 위와 같은 방법으로도 해결할 수 있지 않을까하는 생각이 들고 , 한 번 시도해봐야겠다는 생각이 들었습니다.
SSR 방식에 대해서 조금 더 이해할 수 있는 시간이였고, 앞으로 동적라우팅을 사용할 경우에 오늘 해결한 방법을 계속 적용해 나가야겠습니다.