Is the `rewind` approach safe?

I’m wondering how the rewind feature works internally. As far as I understand it simply outputs and removes the last rendered data that can be rendered on the server into a head. So is there something like a queue inside that the head data is being pushed on?

This assumes that the node.js server calls rewind as soon as possible after the render, right? Couldn’t it happen that a new request comes in after a render that kicks off a new render and the rewind for the first request returns the data for the second request?

I might be totally wrong though – thanks in advance for the explanation! Very useful library btw.!

[amannn]

Thanks for the fast reply!

I did a bit more research and I found some related issues (seems like my concern is related to the underlying API of react-side-effect):

• #23 of react-side-effect
• #7 of react-document-title: There’s also another description of my problem.

The important takeaway for me is that there should only be synchronous logic between renderToString and the call to rewind(), as async logic will introduce the race condition.

There are however also data fetching libraries that are rendering continuously in order to recursively fetch data for all components in the tree that need data (e.g. react-apollo does it – which is what I’m using – and also react-resolver I think). As far as I understand the node.js event loop, for these scenarios the data in Helmet can be inconsistent as the renders that are part of the data fetching can run in parallel – or rather parts of them after each other. Thus it’s important that there’s a final renderToString call after all the data fetching so the data for react-helmet will get into a correct state and can be pulled out.

I explained my findings in a bit more detail as maybe they could be helpful to someone else who is wondering about the same problem 😉.

[kouhin]

I forked this repository and create react-safety-helmet to resolve this problem.

Everyone can simply migrate codes.

import { createHelmetStore, HelmetProvider, Helmet } from 'react-safety-helmet';

// helmetStore must be created per request.
const helmetStore = createHelmetStore();
ReactDOMServer.renderToString(
    <HelmetProvider store={helmetStore}>
        <Helmet>
            <title>Fancy title</title>
        </Helmet>
    </HelmetProvider>,
    container
);
const head = helmetStore.rewind();

Also, React 16 renderToNodeStream is supported.

import stream from 'stream';

class DrainWritable extends stream.Writable {
    constructor(options) {
        super(options);
        this.buffer = '';
    }

    _write(chunk, encoding, cb) {
        this.buffer += chunk;
        cb();
    }
}

new Promise((resolve, reject) => {
    const writable = new DrainWritable();
    const helmetStore = createHelmetStore();
    ReactDOMServer.renderToNodeStream(
        <HelmetProvider store={helmetStore}>
          <App />
        </HelmetProvider>,
    ).pipe(writable);

    writable.on('finish', () => {
        resolve({
            body: writable.buffer,
            head: helmetStore.rewind(),
        });
    });
    writable.on('error', reject);
}).then(({body, head}) => {
    // Create html with body and head object
});

If possible, I will create a PR to react-helmet, but it will break the compatibility.