URL을 통해 사이트에 접속했을 때, SPA의 특징으로 첫 화면은 비어있는 body가 로드됩니다. 이때 크롤링봇이 첫 빈 화면을 크롤링하기 때문에 정상적으로 크롤링을 하지 않습니다. 이 문제를 해결하기 위해 react-snap을 이용해 일정 시간이 지나면 크롤링하도록 설정합니다.

react-snap 사용법과 page별 적용

// package.json
"scripts": {
    "start": "react-scripts start",
    "postbuild": "react-snap"
  },
  "reactSnap": {
    "include": [
      "/",
      "/result",
      "/filters"
    ]
  },

hydrate 함수 적용

hydrate 함수를 이용해 이미 존재하는 돔 구조를 초기화하지 않고 이어서 사용하도록 합니다.

// index.js
const rootElement = document.getElementById('root')

if (rootElement !== null && rootElement.hasChildNodes()) {
  hydrate(
    <Router basename="Assignment4-DW-SW">
      <Provider store={store}>
        <App />
      </Provider>
    </Router>,
    rootElement
  )
} else {
  render(
    <Router basename="Assignment4-DW-SW">
      <Provider store={store}>
        <App />
      </Provider>
    </Router>,
    rootElement
  )
}