序章

React Helmet は、ドキュメントのheadセクションを動的に管理するためのコンポーネントです。 一般的な使用例には、ドキュメントのtitle、description、およびmetaタグの設定が含まれます。

サーバーサイドレンダリングと組み合わせると、検索エンジンやソーシャルメディアクローラーによって読み取られるmetaタグを設定できます。 これにより、サーバーサイドレンダリングとReact Helmetは、SEO（検索エンジン最適化）とoEmbed、Facebook Open Graph、Twitterカードなどのソーシャルメディアデータの恩恵を受けることができるアプリを作成するための強力な組み合わせになります。

この記事では、ReactアプリケーションでのReactヘルメットの機能について説明します。

前提条件

この記事をフォローするには、次のものが必要です。

  • npmやyarnなどのパッケージマネージャーを使用したパッケージのインストールに精通していること。
  • Reactプロジェクトでのコンポーネントのインポートと使用に精通していること。

注：このチュートリアルでは、Reactプロジェクトを作成する手順やサーバー側のレンダリングを設定する手順については説明しません。 Reactアプリのサーバー側レンダリングを有効にする方法を参照してください。

このチュートリアルは、ノードv15.3.0、npm v6.14.9、react v17.0.1、およびreact-helmetv6.1.0で検証されました。

ステップ1—プロジェクトにReactヘルメットを追加する

まず、コンポーネントをプロジェクトにインストールします。

  1. npm install react-helmet@6.1.0

これで、ドキュメントの先頭に子として配置する必要のある要素をHelmetコンポーネントに追加することで、アプリでReactHelmetを使用できます。

src / App.js
import { Helmet } from 'react-helmet';

function App() {
  return (
    <div className="App">
      <Helmet>
        <title>App Title</title>
        <meta name="description" content="App Description" />
        <meta name="theme-color" content="#008f68" />
      </Helmet>
    </div>
  );
}

export default App;

次に、ブラウザの開発者ツールを開き、head要素を調べます。

Inspect Element
<head>
  <!-- ... --->
  <title>App Title</title>
  <!-- ... -->
  <meta name="description" content="App Description" data-react-helmet="true">
  <meta name="theme-color" content="#008f68" data-react-helmet="true">
  <!-- ... --->
</head>

ReactHelmetによって追加されたtitleおよびmeta要素を観察します。

ステップ2—値を上書きする

ツリーのさらに下のコンポーネントは、上位レベルのHelmetコンポーネントに提供される値をオーバーライドできます。

たとえば、titleを変更するHelmetコンポーネントを含むChildComponentについて考えてみます。

src / ChildComponent.js
import React from 'react';
import { Helmet } from 'react-helmet';

export default function ChildComponent() {
  return (
    <div>
      <Helmet>
        <title>Modified Title</title>
      </Helmet>
      <h1>Child Component</h1>
    </div>
  )
}

次に、Appコンポーネントに再度アクセスし、新しいChildComponentを含めます。

src / App.js
import { Helmet } from 'react-helmet';

import ChildComponent from './ChildComponent';

function App() {
  return (
    <div className="App">
      <Helmet>
        <title>App Title</title>
        <meta name="description" content="App Description" />
        <meta name="theme-color" content="#008f68" />
      </Helmet>
      <ChildComponent />
    </div>
  );
}

次に、ブラウザの開発者ツールを開き、head要素を調べます。

Inspect Element
<head>
  <!-- ... --->
  <title>Modified Title</title>
  <!-- ... -->
  <meta name="description" content="App Description" data-react-helmet="true">
  <meta name="theme-color" content="#008f68" data-react-helmet="true">
  <!-- ... --->
</head>

titleはApp TitleからModified Titleに変更されます。 descriptionおよびtheme-color値のmetaタグは、上書きされていないため、同じままです。

ステップ3—htmlおよびbodyの属性の処理

属性を指定する必要がある場合は、htmlおよびbody要素を含めることもできます。

たとえば、darkテーマが適用されているbody要素について考えてみます。

src / App.js
import { Helmet } from 'react-helmet';

function App() {
  return (
    <div className="App">
      <Helmet>
        <title>App Title</title>
        <meta name="description" content="App Description" />
        <meta name="theme-color" content="#008f68" />
        <body class="dark" />
      </Helmet>
    </div>
  );
}

次に、ブラウザの開発者ツールを開き、body要素を調べます。

[seconday_label Inspect Element]
<body class="dark" data-react-helmet="class">
  <!-- ... -->
</body>

classはdarkに設定されます。

ステップ4—サーバーでのレンダリング

React Helmetの完全な利点は、アプリがサーバー上でレンダリングされるときに明らかになり、アプリがドキュメントの先頭にある正しい要素で提供されるようになります。

Reactサーバー側でレンダリングされたアプリのセットアップが整っていると仮定すると、ReactDOMServerのrenderToStringまたはrenderToStaticMarkupを呼び出した直後に、ReactHelmetのrenderStaticメソッドを呼び出して、プロパティを持つインスタンスを取得できます。 Helmetデータの場合：

server / index.js
import React from 'react';
import ReactDOMServer from 'react-dom/server';
import express from 'express';
import { Helmet } from 'react-helmet';

import App from '../src/App';

const PORT = process.env.PORT || 3006;
const app = express();

app.get('/*', (req, res) => {
  const appString = ReactDOMServer.renderToString(<App />);
  const helmet = Helmet.renderStatic();

  const html = `<!DOCTYPE html>
    <html lang="en">
      <head>
        ${helmet.title.toString()}
        ${helmet.meta.toString()}
      </head>
      <body>
        <div id="root">
          ${ appString }
        </div>
      </body>
    </html>
  `

  res.send(html);
});

app.listen(PORT);

ヘルメットのrenderStaticを呼び出すと、titleやmetaなどのプロパティを持つインスタンスが返されます。 link、script、noscript、style、htmlAttributes、bodyAttributesなどの他のプロパティにもアクセスできます。 ]。

ステップ5—react-helmet-asyncと非同期でレンダリングする

ここでSpectrumから