react-helmet-async


Announcement post on Times Open blog

This package is a fork of React Helmet.
usage is synonymous, but server and client now requires to encapsulate state per request.

react-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.

Usage

New is 1.0.0: No more default export! import { Helmet } from 'react-helmet-async'

The main way that this package differs from 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

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

// 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

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

`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







`

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 list of prioritized tags and attributes can be found in constants.js.

Usage without Context