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

현재 발생한 문제

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

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

처음 입장 시 화면

새로고침 시 오류 화면

---

문제 발생 이유

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

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

---

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

-> 위에서 언급했듯이 동적 경로임을 Next.js에 알려 줄 필요가 있습니다. 그래서 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 방식에 대해서 조금 더 이해할 수 있는 시간이었고, 앞으로 동적 라우팅을 사용할 경우 오늘 해결한 방법을 계속 적용해 나가야겠습니다.