웹 개발

Vercel에서 새로 고침하면 404 Not Found..?

ImJaeOne 2025. 2. 4. 15:00

평화롭게....? 프로젝트를 마무리하고 vercel로 배포를 진행했는데 글쎄 다 멀쩡히 동작하는데 새로고침을 누르기만 하면 404 에러가 뜨는 이상한 문제가 발생했습니다. 설마 코드 상에 문제가 있었는데 배포를 한건가...? 하고 로컬에서 새로고침을 눌러보니 로컬 환경에서는 에러가 나지 않았습니다.

 

이건 배포 환경의 문제다... 생각하고 검색해본 결과 문제의 원인은

React는 CSR이기 때문....!

CSR(Client-Side Rendering, 클라이언트 사이드 렌더링)

 

🔹 React, Vue 같은 SPA(Single Page Application)에서 사용되는 방식
🔹 최초에 index.html 파일과 JavaScript 코드(React 등)를 내려받음
🔹 이후 페이지 이동(라우팅)은 브라우저(클라이언트)에서 직접 처리

 

CSR의 동작 과정

  1. 브라우저가 index.html을 요청하고, JavaScript 파일을 다운로드
  2. JavaScript가 실행되면서 화면을 그려줌
  3. 이후 페이지 이동 시 서버 요청 없이 클라이언트에서 렌더링

 

그래서 뭐... 왜... 때문에 문제가 발생했을까?

 

❌ Vercel에서 발생한 404 문제의 원인

Vercel은 기본적으로 정적 파일(HTML, JS, CSS)을 배포하는 플랫폼이지만 React는 CSR 방식으로 동작하므로, 서버가 직접 라우팅을 처리하지 않습니다. 즉, 예를 들어 사용자가 /dex 경로에서 새로고침하면 서버는 해당 경로의 HTML을 찾으려고 하지만 존재하지 않아 404 에러 발생하게 된 것입니다.

 

✅ 해결 방법: vercel.json  수정

{
  "rewrites": [
    { "source": "/(.*)", "destination": "/" }
  ]
}

 

Vercel에서 모든 요청을 index.html로 리디렉션하면, React 애플리케이션이 로드되고 클라이언트 측에서 React Router가 요청된 경로(/dex와 같은)를 해석하여 해당 페이지를 렌더링합니다.

 

결국, /dex와 같은 경로에 대한 요청은 Vercel에서 실제 파일을 찾는 것이 아니라, index.html로 리디렉션되어 클라이언트 측에서 라우팅이 이루어지게 됩니다.

 

이렇게 에러가 다 해결된 줄 알았는데 상세 페이지에서 등록이나 삭제를 한 후 뒤로 가면 데이터가 유지되어 있는데 f5를 누르면 등록이나 삭제가 안되는 문제가 발생했네요...

해결하러 가보겠습니다...