Zenn
Open6

react-helmet導入

みつよしみつよし
$ yarn add react-helmet

# TypeScriptの型定義も導入
$ yarn add @types/react-helmet
みつよしみつよし

react-helmetの仕組みはheadタグに格納する属性を Helmet コンポーネント内に記述することでそれをDOMに生成/上書きしてくれるというもの
様々な兼ね合いからhtmlファイルを後述の最小構成にできないために、上書きができるようになっていると思われる（そのような考慮の不要なサーバーサイドレンダリングではゼロからhtmlを生成するようだ）

# 静的htmlファイル
<html>
  <head>
    <title>Static Title</title>
  </head>
  
  <body>
    <div id="root"></div>
    <script src="index.js"></script>
  </body>
</html>

// index.js へコンパイルされる
import React from "react"
import ReactDOM from "react-dom"
import { Helmet } from "react-helmet"

const App = () => {
  return (
    <div>
      <Helmet>
        <title>Runtime Title</title>
      </Helmet>
      <div id="hoge"></div>
    </div>
  )
}

ReactDOM.render(<App />, document.getElementById("root"))

# 生成されたDOM
<html>
  <head>
    <title>Runtime Title</title> # コードで指定した値に上書きされている
  </head>
  
  <body>
    <div id="root">
      <div id="hoge"></div> # コードで記述した <Helmet> 以外の部分
    </div>
    <script src="index.js"></script>
  </body>
</html>

用意しておく静的htmlファイルはReactを扱ううえでの最小構成である以下の記述のみでも動作した

<div id="root"></div>
<script src="index.js"></script>
みつよしみつよし

react-helmetでOGPを設定することはできるが、実際にホスティングしたときに読み込まれる（= Reactのレンダリングがされる）のかどうか
→ ビルド時にhtmlファイルごと生成して静的に持つようにすれば良いのでは