サーバー側のレンダリングを使用する反応アプリケーションがあります。動的メタタグの表示にはreact-helmetを使用しました。すべてが完璧にセットアップされています。また、ダイナミック メタ タグはブラウザに正しく表示されていますが、サーバー側では未定義の値を取ります。誰かが私にその解決策を教えてください。
例えば :
var React = require('react');
var Helmet = require('react-helmet');
var About = React.createClass({
getInitialState: function(){
return {
title: "",
description: "",
}
},
componentDidMount: function(){
$.ajax({
url: api_url+'/get_meta',
type: 'POST',
dataType: 'json',
async: false,
success: function( response ) {
if( response.status==200 ){
this.setState({title: response.title, description: response.title });
}
}
});
},
render: function() {
var title = this.state.title;
var description = this.state.description;
return (
<div>
<Helmet
title={title}
meta={[
{"name": "description", "content": description }
]}
/>
<p>
This is the title page
</p>
</div>
);
}
});
module.exports = About;
ソースを表示すると、メタ タグに何も表示されませんが、ブラウザー要素を調べると、メタ タグの値が表示されます。しばらくデバッグした後、問題が見つかりました。コンポーネントはサーバー側とクライアント側の両方でレンダリングされるため、サーバー側では初期状態のみでコンポーネントをレンダリングしているため、値が表示されません。
誰かが何をすべきか提案してください。