[CRA | Vercel] lazy 로드된 컴포넌트 배포 시 react router 동작 오류

🛠사용 스택: typescript + craco(웹팩 설정 override) + CRA 사용
🛠상세: 리액트 18 버전, 리액트 라우터 돔 6버전 이상, 타입스크립트 4버전 이상
🛠운영체제: 윈도우

[문제 상황]

vercel로 github과 연동된 SPA프로젝트를 배포하려고 했다. 배포는 성공했으나 페이지 접속 시, 리액트 라우터로 url을 변경하면 동작이 되지 않았다. 예를 들어, 헤더에 포함된 Link to="/path" 가 동작하지 않았다는 것이다. 

대신에 새로고침을 하면 해당 경로의 페이지가 렌더링됐었는데 이유를 짐작하기 어려웠다.

 

[문제 원인 분석]

1. 타입스크립트가 JS로 변환되지 않아서 발생하는 문제일 것이다.

• 배포된 사이트의 소스를 확인해보니 JS로 컴파일된 형태가 아니라 TS문법으로된 모든 리소스가 오픈되어 있었다. 배포된 상태의 리소스라면 js로 변환됐어야 한다고 생각했는데 변환 전TS 파일이 아예 노출되고 있었다. vercel이 타입스크립트를 지원하지 않아서 react-router-dom이 제대로 동작하지 않는다고 짐작했으나 그렇기에는 build 명령어를 통해서 js로 변환하는 것을 알고 있었고 sourcemap사용 시, ts 파일이 노출될 수 있다는 내용을 확인했기 때문에 문제의 원인은 아니었다. 
• 다른 사이트에서는 TS 파일이 노출되지 않았기 때문에 잘 몰랐다. (보안상 TS코드가 노출되면 안좋다고 한다.)

2. craco 가 웹팩 설정을 override하면서 경로가 제대로 인식되지 않는 것이다. 

• 또한, 처음에 craco를 설치했을 때, 개발환경(데브디펜던시)로 설치를 해서 배포 시, 포함이 되지않아 컴포넌트의 경로가 제대로 읽히지 않았을 것이라고 예상했다(craco와 다른 프러그인을 통해서 alias를 따로 지정해줬기 때문에).
• 우선 craco를 데브디펜던시에서 제거하고 다시 재설치를 해주었다. 하지만 역시나 해결되지 않았다.

3. path가 문제인 것이라면 vercel에게 배포 시, 경로를 재설정해주면 될 것이다.

• vercel.json의 파일을 추가하여 적용해보았지만 역시나 똑같이 index 페이지 빼고는 제대로 라우팅되지 않았다.

4. React.lazy() 로 지연로딩을 해온 페이지 컴포넌트가 첫 로드 시, 포함되지 않기 때문에 화면 상에 보여줄 수 없는 것이다. ✅

• 가장 기초적인 부분인데 나는 router를 설정하고 해당 라우터마다 페이지 단위로 컴포넌트를 지연로딩을 해왔다. 소스탭을 확인해보니 해당 페이지를 호출할 때 빈칸임을 확인할 수 있었다. 맨처음 로드 시, index.html에는 컨탠츠가 있었는데 브라우저 라우터를 사용할 때에는 내용이 비어있었다. 그렇다면 lazy 로드가 문제가 될 수 있을 것이라고 생각했다. 
• 또한, lazy를 사용했을 때 Suspense와 함께 사용했었는데 이번 프로젝트에서는 Suspense를 사용하지 않았다. (docs에서도 둘을 같이 사용해야 한다고 나와있다. 페이지가 로드되기 전에 fallback 컴포넌트를 배치해야 하기 때문)
• 지금 생각나는 것으로는 정적 사이트를 배포할 때에는 lazy 로드 자체를 하면 안되는 것인지 아니면 Suspense와 함께 사용하면 해결되는 것인지 궁금하다. 

[해결 방법]

• lazy함수 적용 제거 => lazy함수를 통해 지연 로드해왔던 컴포넌트를 그냥 import하는 방식으로 변경하니 배포 시 라우터가 제대로 동작하게 됐다.

SPA는 초기 로드 시 클라이언트 측 JavaScript 코드가 실행되고, 이 코드는 클라이언트 라우팅을 처리하고 URL의 변화에 따라 적절한 페이지를 동적으로 렌더링한다. 즉, 처음 가져온 JS파일에 url에 따른 렌더링 페이지가 제대로 mapping되어 있어야 하는데 lazy load를 통해서 그 작업이 제대로 되지 않았을 수도 있다는 거 같다. 

 

실제 이슈는 Vercel 배포와는 큰 상관이 없으며, webpack config 혹은 vercel.json으로 수정해야할 path문제도 아니었다.

단지 내가 craco로 Alias 세팅을 하고 타입스크립트로 배포를 처음해보기때문에 Vercel에서는 TS를 지원하지 않아서 애초에 빌드 파일을 올려야하는 건가 했다. 애초에 어플리케이션의 index부터 화면에 아무것도 안 나타나는 것이 아니라 url이 새로고침없이 동적으로 변할 때에만 매핑된 페이지를 전환시켜주지 못하는 상황이었기 때문이다. (즉, TS로 만들어졌어도 vercel에서 빌드를 하기 때문에 브라우저가 현재 언어(JS, html, css)를 이해하고 화면에 잘 출력하고 있다.)

-> 리액트 라우터를 통해 path를 변경하게 되면 서버에 요청을 보내지 않는다. 그래서 새로고침 시, 페이지가 랜더링됐던 거 같다. 

 

해결해보려고 별 걸 다 확인해본 거 같다. vercel의 문제일까봐 `넷틀리파이`에서도 정적 사이스틀 호스팅해봤는데 여기서 배포시 CI설정에서 warning을 error로 설정해놔서 무수한 배포실패를 겪었다(덕분에 냅뒀던 warning들을 다 없앴다..)