[Taskify] Trouble Shooting - 동적 페이지 라우팅

🚫 문제 상황 : 동적 라우팅 ([id].tsx) 페이지에서 새로고침 하면 404 page로 이동한다.

문제 원인을 찾지 못해서 vercel 배포 환경 설정이 잘 못 되었는지 확인하기 위해 로컬에서도 빌드를 진행했습니다.

빌드 후 next/static 폴더의 리소스를 비교했지만 로컬과 vercel 모두 [id]로 동적 파일을 생성했습니다.

어디서부터 잘못된 걸까요...

💡 해결 방법

팀 회의와 검색을 통해 문제 원인과 해결 방법 여러개 찾아보았는데, 프로젝트에 바로 적용하기에는 어려운 부분들도 있어서 멘토님께 해당 이슈를 공유했습니다. 멘토님의 조언을 통해 해결 방법을 간추려 봤습니다.

• getServerSideProps 선언해 SSR(Server Side Rendering)로 동작하도록 수정
  
  • 실제로 SSR로 수정하진 않고, getServerSideProps를 사용함으로써 SSR로 동작하도록만 하는 편법이라고 하네요..😅
• getServerSideProps 실제로 사용해서 SSR로 수정하기
  • 서버에서 페이지를 렌더링하고 HTMl을 브라우저에 전달하는 정석적인 방법❗
• getStaticPaths 선언
  
  • getStaticPaths를 선언하면 [id].tsx 형태의 동적 라우팅 페이지를 빌드 시에 static하게 생성한다고 합니다.
    

    export async function getStaticPaths() {
        return {
            paths:[
                {
                    params:{postId: '1'},
                },
                {
                    params:{postId: '2'},
                },
                {
                    params:{postId: '3'},
                },
            ],
            fallback: false,
        }
    }

    

  • 프로젝트 특성상 dashboard의 수가 매우 많습니다. 따라서 빌드 시에 html과 json 파일이 dashboard의 수만큼 많이 생기기 때문에 비효율적이라고 하네요..😅
• 동적 페이지 라우팅(/dashboard/[id].tsx)을 사용하지 않고 router.query()를 이용해 dashboardId를 받아 데이터를 요청한다. (참고)
  • Next.js에서 제공하는 동적 페이지 라우팅을 일부로 사용하지 않는 방법은 Next.js를 선택한 이유를 퇴색시키는 방법인 것 같아 최후의 방법으로 미루기로 했습니다.

✨ 최종 해결 과정

해당 이슈를 해결하기 위해 pr을 올려 배포 테스트를 하는 방법보다 로컬에서 적용 후 빌드해 확인하는 방법이 효율적일 것 같아 각자 로컬에서 확인하는 방법을 선택했습니다.

일단 최신 상태를 반영하기 위해 dev 브랜치로 이동후 pull을 실행 후 빌드를 진행했습니다.

그런데 이게 뭐죠..❓

이전에 빌드된 서버를 실행할 때는 보이지 않던 에러가 보입니다.

output: export❓❓

next.config.ts에서 output: 'export'는 Next.js 애플리케이션을 정적 HTML 파일로 빌드하도록 설정합니다. 이 설정을 적용하면 모든 페이지를 정적으로 렌더링하여 파일 시스템에 HTML, CSS, JS 형태로 저장합니다. 정적 배포가 가능한 CDN이나 정적 사이트 호스팅 서비스(Netlify, Vercel 등)에서 사용할 수 있도록 만들어주는 설정입니다.

 

확인해 보니 팀장님께서 Netlify와 Vercel에 배포를 하기 위해 추가한 설정이라고 하네요.

정적 HTML 파일로 빌드할 경우, 동적 라우팅 페이지는 정적 파일로 생성되지 않으므로 서버 측에서 해당 경로를 처리할 수 없어 새로고침 시 404 에러가 발생했던 것이었습니다.

 

next.config.ts 파일에서 output: export 옵션을 삭제 후 확인해 보겠습니다!

 

프로젝트 발표가 얼마 남지 않았습니다!

이번 프로젝트는 팀원들과의 소통도 원활했고, 개발도 잘 진행되어서 정말 뿌듯합니다.
발표도 성공적으로 마무리해서 좋은 결과로 이어졌으면 좋겠네요😊😊

 

[Taskify] 1차 배포 테스트(2) - 사용자 편의성 개선

 

[Taskify] 1차 배포 테스트 - Trouble shooting