Thread-safe Helmet for React 16+ and friends
npm install react-19-helmet-asyncreact-helmet relies on react-side-effect, which is not thread-safe. If you are doing anything asynchronous on the server, you need Helmet to encapsulate data on a per-request basis, this package does just that.
import { Helmet } from 'react-helmet-async'
react-helmet is that it requires using a Provider to encapsulate Helmet state for your React tree. If you use libraries like Redux or Apollo, you are already familiar with this paradigm:
javascript
import React from 'react';
import ReactDOM from 'react-dom';
import { Helmet, HelmetProvider } from 'react-helmet-async';
const app = (
Hello World
Hello World
);
ReactDOM.hydrate(
app,
document.getElementById(‘app’)
);
`
On the server, we will no longer use static methods to extract state. react-side-effect
exposed a .rewind() method, which Helmet used when calling Helmet.renderStatic(). Instead, we are going
to pass a context prop to HelmetProvider, which will hold our state specific to each request.
`javascript
import React from 'react';
import { renderToString } from 'react-dom/server';
import { Helmet, HelmetProvider } from 'react-helmet-async';
const helmetContext = {};
const app = (
Hello World
Hello World
);
const html = renderToString(app);
const { helmet } = helmetContext;
// helmet.title.toString() etc…
`
Streams
This package only works with streaming if your data is output outside of renderToNodeStream().
This is possible if your data hydration method already parses your React tree. Example:
`javascript
import through from 'through';
import { renderToNodeStream } from 'react-dom/server';
import { getDataFromTree } from 'react-apollo';
import { Helmet, HelmetProvider } from 'react-helmet-async';
import template from 'server/template';
const helmetContext = {};
const app = (
Hello World
Hello World
);
await getDataFromTree(app);
const [header, footer] = template({
helmet: helmetContext.helmet,
});
res.status(200);
res.write(header);
renderToNodeStream(app)
.pipe(
through(
function write(data) {
this.queue(data);
},
function end() {
this.queue(footer);
this.queue(null);
}
)
)
.pipe(res);
`
Usage in Jest
While testing in using jest, if there is a need to emulate SSR, the following string is required to have the test behave the way they are expected to.
`javascript
import { HelmetProvider } from 'react-helmet-async';
HelmetProvider.canUseDOM = false;
`
Prioritizing tags for SEO
It is understood that in some cases for SEO, certain tags should appear earlier in the HEAD. Using the prioritizeSeoTags flag on any component allows the server render of react-helmet-async to expose a method for prioritizing relevant SEO tags.
In the component:
`javascript
A fancy webpage
`
In your server template:
`javascript
${helmet.title.toString()}
${helmet.priority.toString()}
${helmet.meta.toString()}
${helmet.link.toString()}
${helmet.script.toString()}
...
`
Will result in:
`html
A fancy webpage
...
`
A list of prioritized tags and attributes can be found in constants.ts.
Usage without Context
You can optionally use outside a context by manually creating a stateful HelmetData instance, and passing that stateful object to each instance:
`js
import React from 'react';
import { renderToString } from 'react-dom/server';
import { Helmet, HelmetProvider, HelmetData } from 'react-helmet-async';
const helmetData = new HelmetData({});
const app = (
Hello World
Hello World
);
const html = renderToString(app);
const { helmet } = helmetData.context;
``