-
Notifications
You must be signed in to change notification settings - Fork 0
Dynamic Routing을 적용한 Page Component에서 param을 활용해 404 페이지로 리디렉션하기 위한 방법
마켓 페이지(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페이지로 이동되는 이슈
가 있었다.
페이지에 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
은 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페이지로 이동시켜주려고 했다.
getStaticPaths
함수로 원하는 경로만 paths에 넣고, fallback : false를 줬다.
getStaticProps
함수 내에서 props에 추가한 category는 페이지 컴포넌트에서 props로 받아 사용한다.
잘못된 url 입력으로 페이지 접근 시 바로 404로 이동되는 것을 확인할 수 있다.
참고)
😎@Daewon Seo 🥳@papa 🧐@Coa 🤪@HuiSeung LEE
Test 관련 이슈
Next.js 관련 이슈
Git 관련 이슈
기타 이슈
기술공유
- [strapi] authenticated request 구현하기
- aria label는 왜 쓰는 것인가?
- font icon을 집어 넣을 때 i 태그로 넣을까? pseudo elements(before, after)로 넣을까?
- Nextjs에서 a 태그를 Link 태그로 감싸야 한다.
- Nextjs에서 img 대신 Image 컴포넌트 사용하기, next.config.js는 무엇인가?
- React.FC
- React.js rest Props와 Object destructuring
- Reactjs 컴포넌트 선언 방식을 화살표 함수로 할지 함수 선언문으로 할지
- Test 참고
- useAxios test code
- 뷰포트 메타태그, Next.js에서 Head 태그란?
- 스타일이 중복되서 들어갈 때 그룹 셀렉터 대신 mix를 쓰거나, 아니면 만든 mix의 modifier를 만들어주거나, 각각에 주거나.
- 타입스크립트 클래스에서의 protected, private 필드와 # 필드의 차이
- Global state VS local state 리덕스의 배경이해, 글로벌 변수와 다를 바 없다면 지양되어야 하지 않나?
- Fontawesome Icon React 적용방법
- classnames/bind 함수와 classnames 함수의 차이
- Jest와 Testing Library