[React] SEO 처리 하기

1. 개요

React는 기본적으로 CSR(Client Side Rendering), SPA(Single Page Application)으로 동작합니다. 

이때 React에서는 HTML 파일이 딱 1개뿐이고, 그 내용조차 서버에서 javascript를 받아서 렌더링하기 전까지는 빈 껍데기인 상태이기 때문에 검색 엔진에 노출되기가 어렵습니다.

따라서 SEO에 노출시키기 위해 html 내용을 미리 만들어야합니다.

 

 

2. pre-rendering

pre-rendering이란, 빌드할때 미리 특정 페이지를 렌더링해서 html을 만들어 두는 것을 말합니다.

빌드할 때 html 파일을 만들어두기 때문에 검색 엔진이 크롤링하러 사이트에 접근했을 때, 내용물을 보여줄 수가 있게 됩니다.

다만, 빌드 시에는 정적 파일만 가져오기 때문에 서버측에서 가져오는 데이터는 포함되어 있지 않습니다.

 

 

2-1. react-snap

1) pre-rendering을 사용하기 위해 react-snap 라이브러리를 설치합니다.

npm install --dev react-snap

 

2) package.json에   "postbuild": "react-snap" 스크립트를 추가해줍니다.

  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "postbuild": "react-snap"
  },

 

3) pre-rendering할 페이지를 package.json에 추가해줍니다.

"reactSnap": {
    "include": [
      "/index","/"
    ]
  }

 

 

 

4) npm run build로 빌드해줍니다.

그러면 먼저 빌드가 되고 자동적으로 react-snap 라이브러리가 실행됩니다.

 

5) serve로 서버 실행하기

serve 라이브러리를 전역에 설치하고,

npm install -g serve

 

 

/build/server.json을 생성해 아래와 같이 작성합니다

{
  "rewrites": [
    { "source": "/", "destination": "/200.html" },
    { "source": "/index", "destination": "/index.html" }
  ]
}

그다음 아래 명령어로 서버를 실행시킵니다.

serve -c server.json build