[Next.js(187)]대체 페이지 & “Not Found” 페이지+

이유정·2024년 4월 3일
0

Next.js (pages router)

목록 보기
16/51
post-custom-banner

client가 존재하지 않는 페이지를 요청하는 경우에 대해 알아보자.

만약, 없는 product4를 찾아 url pid 값으로 /p4를 추가하면
404 에러 페이지가 뜬다.

  • pathWithParams는 매개변수 쌍만 구성하는 배열로 [pid]값으로는 p1, p2, p3 를 갖는다.
  • 만약 사전 생성되지 않은 id의 페이지를 불러올 경우 404 error page가 뜸.


fallback을 true 값으로 설정하면?

  • dummy-backend.js 파일에 저장된 상품 외에도 fetching 할 수 있는 data가 있다고 가정
  • 즉, 파일에서 찾을 수 없는 id에 대해서도 페이지 렌더링 가능 !
    =>fallback:true 동적 세그먼트의 모든 값에 대한 page를 일일이 다 사전 생성할 필요 x
    (어떤 페이지는 사전렌더링, 어떤 페이지는 client가 요청할 때 렌더링)
    (+fallback:blocking 은 따로 로딩 페이지 안보여주고 시간 걸리지만 딱 바로 데이터 보여주는 식)


fallback: true로 설정하면? 에러가 뜨는데,

yj: 왜겠어? fallback : true는 동적으로 변수를 취급해서 페이지를 사전 렌더링하는 것도 있고, 요청에 따라서 렌더링하는 페이지가 있다는 걸 인정하는 거야 !!! 그니까 모든 데이터를 즉시 확인하는데 당연히 loading 시간이 필요하겠지. 그러니까 loding인 경우를 처리해줘야 한다


상품 페이지를 계속 기다리는 이 fallback 상황에서 해당 메시지가 뜨는 것 (이미 본 적있다 전 수업에)

  • fallback이 true일 때, Next.js는 즉시 데이터가 아직 없는 페이지를 반환하고 백그라운드에서 데이터를 불러와서 페이지를 다시 렌더링하고 화면에 표시한다.

    그러므로, 상품 data를 기다릴 땐 이 fallback page를 렌더링해야한다.



새로고침하면, 로딩중인거 뜨고, 런타임 error가 뜬다.

  • 데이터가 없는 상품 page를 load하려고 했기 때문(p4)

이 경우야 말로, getStaticProps가 반환하는 객체에서 찾을 수 없는 property에 대응하는 완벽한 예시를 들 수 있겠다 !!!!


product이 없는 경우를 예외처리 해준다.

  • return { notFound: true }

=> getStaticPaths에서 fallback:true로 둘 수 있고,
=> 사전 정의되지 않은 매개 변숫값에 대한 상품을 찾기 위한 시도도 한다.


그렇게 처리하면 '로딩 중' 메시지가 뜨다가 404 에러 페이지가 뜬다.

profile
강의 기록 블로그
post-custom-banner

0개의 댓글