Установите метатеги на основе данных ответа API в React
Я использую razzle для SSR и реагирую-шлем, чтобы установить метатеги в моем приложении.
Для страниц, на которых я хочу установить неизменяемый контент, он отлично работает. Например, на главной целевой странице у меня есть:
<Helmet>
<title>This is a title</title>
<meta property="og:title" content='This is also a title' />
</Helmet>
Но если я открываю страницу с одним постом posts/:postIdЯ хочу отображать заголовок и другие значения метатега динамически. Заголовок будет заголовком этого сообщения, но мне нужно дождаться ответа 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, они могут выбрать правильные метатеги и отобразить сообщение в красивом формате.