React에서 SEO 처리하기

Jinjer·2022년 2월 18일

React seo

1. 프롤로그

대다수의 개발자들에게
SPA의 단점이 무엇인가 물어보면 SEO를 많이 얘기한다

SEO가 왜?
🤔🤔🤔

2. SEO

검색 엔진 최적화(Search Engine Optimization)는
사이트를 검색 결과에 잘 노출될 수 있도록 하는 것인데

구글, 네이버와 같은 검색 엔진은 자체적으로 만든 검색봇을 이용해서
수 많은 웹페이지에서 검색 결과에 근접한 페이지를 최상위에 매칭해준다

3. Rendering

이때, 검색봇이 수집할 때 활용하는 것으로
웹 브라우저 기반 해석(렌더링)이 있다.

대표적인 웹 브라우저 렌더링 방식

Client-side rendering(CSR)

Server side rendering(SSR)

핵심은 검색 엔진이 렌더링된 웹페이지를 해석할 때
자바스크립트를 사용하여 동적으로 HTML을 처리하는 경우가 아니라면
정적인 HTML의 내용을 먼저 수집하여 색인을 한다는 것이다

3-1. CSR

React, Vue와 같은 SPA 프레임워크가 대부분 CSR에 해당되는데
서버(React)가 구동되면 단 하나만 존재하는 index.html에서
app.js를 서버에 요청하고 필요한 정보를 app.js에 모두 담아 다시 클라이언트로 보내준다.

이후 변화가 필요할 때마다 app.js를 다시 요청하고 받는 방식이다

다행히도?
구글의 검색로봇은 자바스크립트를 해석할 수 있기에
문제없이 SEO를 수행할 수 있다

Pre-rendering

외국에서는 Pre-order(선주문), Pre-pay(선결제) 등 미리 선행한다 해서
Pre- 를 붙여 자주 사용하는데 Pre-rendering 또한
렌더링을 미리 해준다는 의미로 해석하면 쉽다.

CSR 기반에서 Pre-rendering을 가능하게 해주는
라이브러리가 이미 존재한다

🌱 설치

npm install react-snap --dev
or
yarn add react-snap --dev

설치가 완료되면 index.js의 기존 렌더링 코드를 약간만
수정해주면 바로 적용이 가능하다

📁 index.js

import React from 'react';
import App from './App';
import { hydrate, render } from "react-dom";
const rootElement = document.getElementById("root");

if (rootElement.hasChildNodes()) {
    hydrate(<App />, rootElement);
} else {
    render(<App />, rootElement);
}

설정이 완료되면 package.json으로 가서 'postbuild' 옵션을 지정하여
build가 될때 react-snap이 실행될 수 있도록 한다

📁 package.json

"scripts": {
  "start": "react-scripts start",
  "build": "react-scripts build",
  "postbuild": "react-snap"
},
"reactSnap": {
  "include": ["/", "/about"]
 },

빌드가 완료되면 include에 지정한 경로대로 크롤링된 .html 파일이 생성된다