왜 BrowserRouter는 새로고침하면 404 에러가 뜰까

우리가 페이지에 방문한다는 것은 해당 페이지의 url에다가 index.html 혹은 렌더링할 무언가를 달라고 GET 요청을 보내는 것을 뜻합니다. 

 

근데, 해당 URL에 해당하는 곳에 원하는 것이 없다면 Not Found 404 에러가 뜨는 것이죠. 

 

리액트로 개발을 하면 보통 처음에 BrowserRouter를 많이 씁니다. 

 

개발할때는 새로고침해도 괜찮지만, 배포한 이후에는 새로고침하면 404에러가 뜨게 되요. 

 

왤까요?

 

 

 

리액트 개발서버 ( create-react-app의 개발서버 ) 는 모든 경로에 대한 요청을 자동으로 index.html로 리다이렉트 해줍니다. 즉, 브라우저에서 어떤 경로로 접근하든 개발 서버는 항상 리액트 어플리케이션의 진입점인 index.html 을 제공해주죠. 

그러니까 not found 에러는 안 뜨죠.

 

그렇다면 클라이언트 사이드 라우팅을 볼까요

BrowserRouter는 html5 history api를 사용해서 클라이언트 측에서 라우팅을 관리합니다. URL 변경은 있지만, 페이지 전체를 다시 로드하지 않고, 필요한 컴포넌트만 렌더링 합니다. 이 과정에서 가상돔이니, 얕은 비교 깊은 비교 등의 개념이 파생되어서 나옵니다. 하지만 각설하고,,

 

개발서버의 경우 모든 경로에 대해서 index.html 을 반환하기 때문에 새로고침해도 어플리케이션이 잘 작동해요. 

 

 

하지만

배포한다음에는 어떨까요? 

우리는 개발 결과를 배포할 때 이를 빌드합니다. 빌드하면 정적파일이 나오게 됩니다.

리액트는 싱글페이지 어플리케이션이기 때문에 실제로 빌드하면 INDEX.HTML 페이지 하나가 나오게 됩니다.

이를 갖다가 이제 배포해야해요. 

 

배포된 어플리케이션은 일반적으로 Apache, Nginx와 같은 정적 파일 서버에서 호스팅 됩니다. 이러한 서버들은 요청된 URL경로에 해당하는 실제 파일이나 디렉토리를 찾죠. 

 

그럼 왜 404에러가 날까요? 

예를 들어서 사용자가 http://yourdomain.com/about을을 새로고침하면 서버는 /about 경로에 해당하는 파일을 찾고 없으면 404 Not Found 오류를 반환합니다.

 

하지만, 정적 파일서버는 클라이언트 사이드 라우팅 CSR 을 인지하지 못해요. 때무에 별도의 설정 없이는 모든 경로에 대해서 index.html을 제공하지 않습니다.

 

 

짧게 요약하면 

 

개발서버는 SPA를 지원하도록 특별히 구성되어있고, 모든 경로를 index.html로 리다이렉트하는 기능이 내장되어있습니다.

배포서버는 기본적으로 요청된 경로에 해당하는 정적 파일을 제공하며, spa를 지원하기 위한 설정이 없습니다.

따라서 클라이언트 사이드 라우팅에 필요한 처리가 이뤄지지 않아요. 

 

 

 

그럼 어떻게 해결해야할까요?

1. 정적파일용 배포서버에 설정을 해주면 됩니다! 개발서버처럼요!

httpconf 파일을 수정하거나 ( apache ) 

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

nginx 파일을 수정해주세요.

location / {
  try_files $uri $uri/ /index.html;
}

 

2. 그냥 서버사이드 렌더링 프레임워크 쓰세요!

- Next.js나 Gatsby 등이 있어요. 

- SEO와 초기로딩 속도를 잡을 수 있습니다. 

- 하지만 SPA만큼 부드럽진 않아요.

 

3. HashRouter를 사용하세용

- URL에 #를 포함해서 CSR를 구현하는 겁니다. 그럼 경로가 / 하나밖에 없으니까 404 나올 일도 없어요

- 구글 검색엔진은 해시라우팅을 인덱싱할 수 있다고 알려져 있어요.