react-snap 라이브러리를 사용하여 pre-rendered 리액트 애플리케이션을 만드는 방법에 대해 알아보도록 하겠습니다.
pre-rendered 가 뭘까요? 🧐
SPA은 빠르게 앱을 빌드할 수 있는 장점이 있지만, 때로는 페이지에 담긴 모든 것들이 로드되어 보여줄 준비가 되지 않는 단점이 있습니다. 페이지의 컨텐츠를 보여주는 것 대신에 자바스크립트 태그를 먼저 만나게 되어 사이트를 보여주는 것이 막히게 되는 것이죠.
사전 렌더링은 웹 크롤러가 볼 수 있도록 페이지의 모든 요소를 사전로드하는 프로세스를 의미합니다. prerender 서비스는 페이지 요청을 낚아채어 사용자가 크롤러인지 여부를 확인하여 크롤러인 경우 캐시 된 버전의 페이지를 전달하여 줍니다. 반대로 크롤러가 아니라면 일반적인 페이지를 전달해주게 되죠.
즉, 크롤러를 위한 최적화 작업을 하는 것이 prerender의 핵심이라고 할 수 있습니다.
prerender에 대해 더 자세히 알고 싶으시면 netlify에서 제공하는 문서를 살펴보세요.
react-snap을 사용하여 pre-rendered 리액트 앱 만들기
prerender에 대해 살펴보았으니, react-snap을 사용하여 pre-rendered 리액트 앱을 만들어 보겠습니다.
먼저 react-snap 을 설치합니다.
yarn add --dev react-snap빌드 후에 react-snap 을 실행하기 위해서 package.json 에 다음을 추가합니다:
src/index.js 를 변경해줍니다 (React 16+):
끝입니다! 간단하지 않나요? 🤗
좀 더 자세한 사용법이 필요하시면 react-snap Github 페이지에서 찾아보세요.
URL에 해쉬(#)를 사용을 자제하여 주세요!
저는 CRA (Create React App)으로 빌드한 저의 포트폴리오 페이지를 GitHub Pages 를 사용하여 호스팅하고 있었습니다. 그리고 Github Pages를 사용하여 호스팅하기 위해서는 react-router 의 HashRouter 를 사용해야 하더라구요(다른 방법이 있을 수도 있습니다). 앞서 살펴본 사용 방법을 예시로 들면 다음과 같았습니다.
별다른 문제는 없었습니다. 적어도 로컬에서 확인하였을 때는 말이죠.
문제는 Github Pages를 통해 배포된 버전을 확인하였을 때 나타났습니다. 외부 링크를 방문하고 돌아오거나 메인 페이지를 제외한 경로에서 새로고침을 하는 경우에 메인 페이지와 해당 경로의 페이지가 뒤섞여 보이는 문제가 발생하였습니다.
HashRouter 대신에 BrowserRouter 를 사용하면 될 일이지만, 해쉬(#)를 사용하지 않으면 도리어 Github Pages에서 문제가 발생하였습니다. 위와 거의 동일한 문제가 발생했던 것이죠.
어찌되었든, 제가 짐작하는 문제의 원인은 구글 봇이 URL의 해쉬(#)를 무시하기 때문에 react-snap 이 URL에서 해쉬(#)뒤의 경로를 불러오는 과정에 충돌이 발생하여 발생하지 않았을까 생각이 듭니다 (절대 확실한 것이 아닙니다).
구글 봇은 왜 해쉬를 무시할까요?
구글의 Gary Illyes는 #를 스크롤 다운을 위한 a태그에서 사용하는 경우에는 문제가 되지 않는다고 합니다. 첫 로드에 이미 로드가 된 경우이기 때문이라고합니다. 하지만 URL에서 #뒤의 내용에 따라 새로운 컨텐츠를 로드하도록 사이트를 프로그래밍하는 경우에는 문제가 발생한다고 합니다.
이러 이유 때문에 구글 봇이 해쉬를 무시하는(?) 것이 아닐까 생각합니다.
Gary Illyes 연설에 대한 정보는 이곳에서 확인하세요.
Wrap Up!
- prerender는 크롤러 봇을 위한 최적화 방법입니다.
react-snap을 사용하신다면, URL에 해쉬 사용을 자제하여 주세요.
도움이 되셨기를 바라며, 내용에 오류가 있는 경우에는 댓글로 남겨주세요.
감사합니다. 😚
