Dynamic Routing을 적용한 Page Component에서 param을 활용해 404 페이지로 리디렉션하기 위한 방법

1️⃣ 어쩌다 버그를 마주했는가

마켓 페이지(MarketCategoryPage)에서 DetailNav(세부 네비게이션) 항목을 눌러서 접근하지 않고, market/crypto나 market/cr 등으로 url을 직접 입력해서 페이지에 접근하면 dynamic routing(market/[category])을 통해 MarketCategoryPage 컴포넌트에서 category(params)을 캐치할 수 있다.

이 때 정해진 category(’stock’, ‘crypto’, ‘indices’)에 포함되지 않은 string이거나 string[]이거나 undefined면 404페이지로 리디렉션해야 했다. 그런데 없는 url로 접근하더라도 MarketCategoryPage의 Header 부분이 잠깐 보여졌다가 404페이지로 이동되는 이슈가 있었다.

2️⃣ 원인은 무엇인가

페이지에 Static Generation이 자동으로 적용되어 있어서 pre-render된 MarketCategoryPage의 헤더 부분이 잠깐 보여진 것이다.

Static Generation이 자동 적용된 이유는 Page Component를 export했고 따로 getStaticPaths/getStaticProps나 getServerSideProps를 하지 않아서였다. 기본적으로 Next.js는 모든 페이지를 pre-render한다. 이는 퍼포먼스가 우수하고 SEO에 유리하다는 장점이 있다. 미리 준비된 페이지들이 있어서 요청에 따라 js가 로드되어 hydration되기 전에 볼 수 있다.

https://nextjs.org/docs/basic-features/pages

3️⃣ 어떤 시도를 해보았나

첫 번째 해결 방법

은 useRouter()에서 isReady 변수를 받아 먼저 True or False를 확인하고 notFound 함수로 검사해서 ‘stock’, ‘indices’, ‘crypto’에 해당하지 않으면 404 페이지로 리디렉션하는 것이다.

이 방식은 컴포넌트 내부 코드가 지저분해지고 가독성이 떨어진다. Nextjs의 렌더링 동작 원리를 제대로 이해하고 다른 방식으로 해결하는 것이 맞다고 생각했다.

두 번째 해결 방법

SSR을 적용시켜서 getServerSideProps 안에서 아래와 같이 /404로 redirect시켰다. 헤더가 보여지는 건 해결했는데.

Next.js 측에서 SSR은 최대한 쓰지 말라고 성능적으로 SSG가 더 낫다고 권장하고, 마켓 페이지 특성상 실시간 데이터 제공이 중요해서 Data fetching은 컴포넌트 내에서(CSR) 할테니 페이지 컴포넌트 내의 다른 컴포넌트들은 SSG를 써도 된다.(Data fetching을 하지 않고 Header 부분만 그린다.)

https://nextjs.org/docs/basic-features/pages

그래서 getServerSideProps 대신 getStaticProps 와 getStaticPaths를 사용하면서 거기서 지원하는 fallback : false 를 사용해, 주어진 paths들에 맞춰 미리 빌드되어 있던 페이지는 그대로 두고, 유효하지 않은 param이 들어왔을 때 404페이지로 이동시켜주려고 했다.