Open glennreyes opened 8 years ago
Good point @glennreyes. Do you have any thoughts on what a good API might be? Maybe pass relevant rendering information to the JSX template as props? I definitely want this to be more extensible out of the box.
Do you have any thoughts on what a good API might be? Maybe pass relevant rendering information to the JSX template as props?
I've thought like passing another prop to the route like:
<Route meta={{ title: 'Your title', description: 'Your description' }} title="Your page title" />
So your template could look like:
const Template = ({ meta, title }) => (
<html>
<head>
<title>{title}</title>
<meta property="og:title" content={meta.title} />
<meta property="og:description" content={meta.description} />
</head>
</html>
);
What do you think?
Yeah that sounds good to me 👍 . I think I'd like to generalize it and allow the passing of any router props to the template.
@iansinnott any updates on getting this working?
@lifeiscontent nope. I haven't been putting much time towards improvements in this project lately since it depends heavily on both Webpack and React Router, both of which will (supposedly) see new major version releases in the near future.
So I've been loth to implement new stuff until the RR v4 and Webpack v2 APIs are settled, but I would certainly welcome a PR if you want to implement meta tags :)
I'm using React Helmet and would like to use it as described in the docs using Helmet.renderStatic()
(formerly rewind()
). My thought is that it could be called right after const body = component ? renderMethod(component) : '';
and the instance could be passed into the template as helmet.
Then any relevant tags or attributes can be added to the template in the manner demonstrated in the docs: https://github.com/nfl/react-helmet#server-usage
I'm happy to work on this but I'm unsure of the best way to do this as not everyone uses Helmet of course. Would it be passed in as another plugin? Or included in this plugin and enabled via an option flag?
I've tried calling Helmet.renderStatic()
inside the template function but it throws an error and I'm guessing that maybe this in because it has to be called immediately after the render method.
@thebrengun hm, yeah this is still an open question. It seems like it would be helpful to have the helmet
instance available to the template function.
The problem with this issue is still as you said, not everyone uses Helmet or any other particular library so there really needs to be a way to extend the plugin so anyone can add the specific functionality they need. If you have any thoughts on what that should look like let me know.
Maybe some sort of pre and post render hooks where you could call your own code, like Helmet.renderStatic()?
The stack trace that is getting thrown might also give you more insight into why it's breaking in your implementation. You can run your build command prefixed with DEBUG=react-static-webpack-plugin*
to get some pretty verbose debug output about the rendering process of this plugin.
Is there a way to generate different meta tags (title, description) for each route? Something like how the titles work.
I've tried adding like react-helmet or react-document-meta but without success 😐. They work on client-side but the build remains without changes. At the moment I'm using the title prop to generate specific page data.