react SEO , prerender

prerender 의 주요 장점은 각 페이지의 핵심 내용을 크롤러가 얻을 수 있다는 것 뿐만 아니라 브라우저는 JS 파일이 렌더링을 시작하기 위해로드 될 때까지 기다릴 필요가 없으므로  SEO 뿐만 아니라 성능상의 이점도 존재한다.

1

SSR 을 사용하지 않고 SEO 최적화 적용

 

react-helmet 과 react-snap  사용

 

react-helmet

 

https://www.npmjs.com/package/react-helmet

react-helmet

spa 에서 각 route 마다 html head 를 설정할 수 있게 도와준다.

 

import React from "react";
import { Helmet } from "react-helmet";

interface MyHelmetProps {
  title: string;
  description?: string;
}

const MyHelmet = ({ title, description }: MyHelmetProps) => {
  return (
    <Helmet>
      <meta charSet="utf-8" />
      {description && <meta name="description" content={description} />}
      <title>{title}</title>
    </Helmet>
  );
};

export default MyHelmet;

위와 같이 컴포넌트화 해서 사용하면 더 좋지 않을까?

 

 

react-snap

 

script 에 추가하고 build 시 각 route 마다 index.html 을 생성해준다.

react-dom 에서 hydrate 를 사용해서 비교

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

package.json  script 에 추가

import React from "react";
import { hydrate, render } from "react-dom";
import Router from "./Router";


const rootElement = document.getElementById("root");

if (!!rootElement && rootElement.hasChildNodes()) {
  hydrate(
    <React.StrictMode>
      <Router />
    </React.StrictMode>,
    rootElement
  );
} else {
  render(
    <React.StrictMode>
      <Router />
    </React.StrictMode>,
    rootElement
  );
}

react-dom 에서 hydrate 를 사용해서 비교 후 렌더링한다.

 

 

 

 

 

 

참고 자료

https://github.com/stereobooster/react-snap

stereobooster/react-snap

https://ko.reactjs.org/docs/react-dom.html#hydrate

ReactDOM – React

https://stackoverflow.com/questions/46516395/whats-the-difference-between-hydrate-and-render-in-react-16

What's the difference between hydrate() and render() in React 16?

https://create-react-app.dev/docs/pre-rendering-into-static-html-files/

Create React App · Set up a modern web app by running one command.