根据React中的API响应数据设置元标记

Question

我正在使用Razzle进行SSR和react-helmet设置我的应用程序中的meta标签。

对于我要设置内容永不更改的页面，效果很好。例如，在主登录页面上，我有：

<Helmet> <title>This is a title</title> <meta property="og:title" content='This is also a title' /> </Helmet>

但是，如果我打开一个帖子posts/:postId的页面，我想动态显示标题和其他meta标签值。标题将是该帖子的标题，但是我必须等待API响应，并且需要一些时间来获取数据，然后在页面源中我再也看不到带有该帖子值的元标记。

这是Post组件中的渲染方法的示例（我也使用redux）

render() {
    const { loading, post } = this.props;

    if (loading) return <PageLoaderComponent />;

    return (
        <div>
            <Helmet><title>{post.title}</title></Helmet>
           ...
        </div>
    )
}

获取帖子后，我在浏览器中看到标题和其他元标记已更改，但是页面源为“空”，因为<PageLoaderComponent />是在帖子加载时呈现的。 而且，当我将该链接共享到Facebook或其他地方时，它不会获取元标记。

我想要的是为每个帖子显示填充有该帖子数据的元标记，当我共享指向Facebook或Twitter的链接时，他们能够选择正确的元标记并以漂亮的格式显示该帖子。