2019年03月28日

ReactでSSR(タイトル、メタ、OGP)

SSRSSR(ルーティング)と対応してきたのでSSR(タイトル、メタ、OGP)に対応します。

SSRを行う際にタイトル、メタ、OGPなどを変更したいという要望は大きいと思います。

これはreact-helmetというライブラリを利用することで簡単に対応が可能です。

以下のように読み込むことでブラウザレンダリング上は簡単にタイトル、メタ、OGPを変更できます。


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

export const Home = () => (<>
<Helmet>
<title>Home</title>
<meta property="og:description" content="Home" />
</Helmet>
<h1>React Home</h1>
</>)


サーバーサイドレンダリング上では以下のように利用します。


import express from 'express'
import React from 'react'
import ReactDOMServer from 'react-dom/server';
import { StaticRouter } from 'react-router-dom';
import {Helmet} from "react-helmet";

import { App } from './src/App.js'

const app = express()

app.use(express.static('./dist'));

app.get('/*', (req, res) => {
const context = {};
const app = ReactDOMServer.renderToString(
<StaticRouter location={req.url} context={context}>
<App />
</StaticRouter>
);
const helmet = Helmet.renderStatic();

const html = `
<!doctype html>
<html ${helmet.htmlAttributes.toString()}>
<head>
${helmet.title.toString()}
${helmet.meta.toString()}
${helmet.link.toString()}
</head>
<body ${helmet.bodyAttributes.toString()}>
<div id="app">
${app}
</div>
<script src="/script.js"></script>
</body>
</html>
`;

return res.send(html)
})

app.listen(3000)
posted by ねこまんま at 18:14 | React | 更新情報をチェックする