react-helmet outputting empty strings on server-side

问题

I am using react-helmet and on the client all is good in the inspect window and the tags are being outputted correctly. However, when I boot up in production and the SSR kicks in the tags aren't shown in the source and I'm getting no errors at all.

I tried logging the 'stringified' title tag too and got:

<title data-react-helmet="true"></title>

Here is some code:

This is one of the page components where I'm setting the tags from, the 3 page components are all set up identically to this. (I've simplified the components render function and data object as they are quite large and I'm sure these aren't at fault.)

import React, { Component } from 'react';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import { Link } from 'react-router-dom';
import { Helmet } from 'react-helmet';

// Components
import WorkGrid from 'universal/components/Grid';
import Wrapper from 'universal/components/Wrapper';
import Container from 'universal/components/Container';
import Hero from 'universal/components/Hero';
import PageWrapper from 'universal/components/PageWrapper';
import GridHeader from 'universal/components/GridHeader';

const data = {};

class Work extends PageComponent {

  render () {
    return (
      <PageWrapper ref="root">
        <Helmet>
          <title>Work</title>
          <meta name="description" content="Work Description" />
        </Helmet>
        <h1>Work Page</h1>
      </PageWrapper>
    );
  }
}

export default connect(state => ({
  theme: state.ui.theme
}), { changeTheme }, null, { withRef: true })(Work);

This is some of the server code, specifically where the SSR goes down and I'm calling Helmet.renderStatic();

    // Node Modules
import fs from 'fs';
import {basename, join} from 'path';

// Libraries
import React from 'react';
import {StaticRouter} from 'react-router';
import {renderToString} from 'react-dom/server';

// styled-components
import { ServerStyleSheet, ThemeProvider } from 'styled-components';
import { theme } from '../universal/constants';

// Redux
// import {push} from 'react-router-redux';
import createStore from 'data/redux/createStore.js';
import createHistory from 'history/createMemoryHistory';
import { Provider } from 'react-redux';

// Third Party Scripts
import * as thirdPartyScripts from './thirdPartyScripts.js';

// Helmet
import {Helmet} from 'react-helmet';

function renderApp(url, res, store, assets) {
  const PROD = process.env.NODE_ENV === 'production';
  const context = {};

  const {
    manifest,
    app,
    vendor
  } = assets || {};

  let state = store.getState();

  const stylesheet = new ServerStyleSheet();

  const initialState = `window.__INITIAL_STATE__ = ${JSON.stringify(state)}`;
  const Layout =  PROD ? require( '../../build/prerender.js') : () => {};

  const root = PROD && renderToString(
    stylesheet.collectStyles(
      <Provider store={store}>
        <ThemeProvider theme={theme}>
          <StaticRouter location={url} context={context}>
            <Layout />
          </StaticRouter>
        </ThemeProvider>
      </Provider>
    )
  );

  const styleTags = stylesheet.getStyleTags();

  const seo = Helmet.renderStatic();

  console.log(seo.title.toString());

  const html = `<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        ${seo.title.toString()}
        ${seo.meta.toString()}
        ${seo.link.toString()}

        <link rel="shortcut icon" href="/favicon.ico">
        <link rel="icon" sizes="16x16 32x32 64x64" href="/favicon.ico">
        <link rel="apple-touch-icon" href="/favicon-57.png">
        <link rel="apple-touch-icon" sizes="114x114" href="/favicon-114.png">
        <link rel="apple-touch-icon" sizes="72x72" href="/favicon-72.png">
        <link rel="apple-touch-icon" sizes="144x144" href="/favicon-144.png">
        <link rel="apple-touch-icon" sizes="60x60" href="/favicon-60.png">
        <link rel="apple-touch-icon" sizes="120x120" href="/favicon-120.png">
        <link rel="apple-touch-icon" sizes="76x76" href="/favicon-76.png">
        <link rel="apple-touch-icon" sizes="152x152" href="/favicon-152.png">
        <link rel="apple-touch-icon" sizes="180x180" href="/favicon-180.png">
        <meta name="msapplication-TileColor" content="#FFFFFF">
        <meta name="msapplication-TileImage" content="/favicon-144.png">
        <meta name="msapplication-config" content="/browserconfig.xml">

        ${ styleTags }

        ${PROD ? '<link rel="stylesheet" href="/static/prerender.css" type="text/css" />' : ''}

        <link href="${thirdPartyScripts.googleFont}" rel="stylesheet" type="text/css">

        <script>${thirdPartyScripts.googleAnalytics}</script>
    </head>

    <body>
      <script>${initialState}</script>
      ${PROD ? `<div id="root">${root}</div>` : '<div id="root"></div>'}

      ${PROD ? `<script>${manifest.text}</script>` : ''}

      <script>${thirdPartyScripts.facebookPixel}</script>

      <script async src="${thirdPartyScripts.googleAnalyticsSrc}"></script>
      ${PROD ? `<script src="${vendor.js}"></script>` : ''}
      <script src="${PROD ? app.js : './static/app.js'}"></script>
    </body>
    </html>`;

  res.send(html);
}

Also, I am using React Router v4 if that's of any help.

回答1:

I found the solution to this the other week and thought I may as well update this so it can help anyone else having this problem...

Good news is it was surprisingly simple!

For me anyway it was down to the fact that I separate webpack bundles for the client and the server. So in layman's terms it was including react-helmet twice, once for the client and once for the server, meaning all the state holding the meta tags in the client side code didn't exist in the .rewind() call on the server.

Just add this to your server webpack config file

externals: ['react-helmet']

来源：https://stackoverflow.com/questions/45822925/react-helmet-outputting-empty-strings-on-server-side

标签

reactjs

react-router

server-side-rendering

react-helmet