ReactJS dynamic Meta Tags with HTML entry point, possible?

387
March 29, 2017, at 7:33 PM

I've been stuck on something for quite a while now - trying to get dynamic meta tags to work with react.

The root of the problem I've gotten down to is that the HTML is return doesn't contain the intended meta tag information and the social network scrapers (twitter, fb, etc) don't wait for my js to kick in for their evaluation (which is of course - perfectly understandable)

I'm currently using Webpack as a bundler and including the resulting javascript in an index.html which looks like so:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <link rel="stylesheet" type="text/css" href="/bundle.css">
        <title>Curated Mall</title>
    </head>
    <body>
        <div id="root">
        </div>
        <script src="/common.js"></script>
        <script src="/curated-bundle.js"></script>
    </body>
</html>

And I'm pushing my content in the root div by using ReactDOM: ReactDOM.render(<App/>, document.getElementById('root'));

The issue - I can't see any proper way to get dynamic page-based meta tags updated with this solution.

What is the most painless way to achieve this?

I've been thinking it would be best if I can return the whole DOM as a string - that would make passing and overriding meta fields in the head very easy, but my setup (nginx) relies on having an index.html file of some sort to serve.

Any help would be greatly appreciated.

READ ALSO
Is it possible to gzip file on server-side and ungzip it in the browser transparently?

Is it possible to gzip file on server-side and ungzip it in the browser transparently?

My web application sends JSON files to clientThese files can be relatively big

245
preventing recursive promises and associated inability to free mem

preventing recursive promises and associated inability to free mem

Consider concurrent workers that consume from a queue until the queue is empty

240
How to increment letters in javascript to next letter?

How to increment letters in javascript to next letter?

I want a function that I can go from A to B, B to C, Z to A

418