title: In production mode, react helmet async is not working and How react helmet async works?
body: <p>Recently, I started playing with meta tags in react. After some research, I found that react-helmet-async is the best library to set meta tags for each page. however, I wanted to want set meta tags for few pages conditionally.</p>
  <p>I setup metatags for two pages differently, take a look...</p>
  <p>index.js</p>
  <pre><code>ReactDOM.render(
    &lt;React.StrictMode&gt;
      &lt;HelmetProvider&gt;
        &lt;App/&gt;
      &lt;/HelmetProvider&gt;
    &lt;/React.StrictMode&gt;,
    document.getElementById('root')
  );
  </code></pre>
  <p>pageOne.jsx</p>
  <pre><code>componentDidMount(){
      axios.get('/getTrack/',{params: {id: this.props.match.params.id}})
      .then((res) =&gt; this.setState({trackData: res.data, isLoading: false}))
      .catch((err) =&gt; console.log(err))
  }
  render() {
          return (
              this.state.isLoading?
                  &lt;div className=&quot;page-loader&quot;&gt;
                      &lt;Helmet&gt;
                          {/* Page sittings */}
                          &lt;meta charset=&quot;utf-8&quot; /&gt;
                          &lt;meta name=&quot;theme-color&quot; content=&quot;#000000&quot; /&gt;
                          &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot; /&gt;
                          
                          {/* Primary Meta Tags */}
                          &lt;title&gt;Loading...&lt;/title&gt;
                      &lt;/Helmet&gt;
                  &lt;/div&gt;
              :
              &lt;div className=&quot;main-page&quot;&gt;
                  &lt;Helmet&gt;
                      {/* Page sittings */}
                      &lt;meta charset=&quot;utf-8&quot; /&gt;
                      &lt;meta name=&quot;theme-color&quot; content=&quot;#000000&quot; /&gt;
                      &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot; /&gt;
                      
                      {/* Primary Meta Tags */}
                      &lt;title&gt;{this.state.trackData.title}&lt;/title&gt;
                      &lt;meta name=&quot;title&quot; content={this.state.trackData.title}/&gt;
                      &lt;meta name=&quot;description&quot; content={this.state.trackData.desc}/&gt;
                      
                      {/* Open Graph / Facebook */}
                      &lt;meta property=&quot;og:type&quot; content=&quot;website&quot;/&gt;
                      &lt;meta property=&quot;og:url&quot; content=&quot;https://example.com/&quot;/&gt;
                      &lt;meta property=&quot;og:title&quot; content={this.state.trackData.title}/&gt;
                      &lt;meta property=&quot;og:description&quot; content={this.state.trackData.desc}/&gt;
                      &lt;meta property=&quot;og:image&quot; content=&quot;/logo192.png&quot;/&gt;
                      
                      {/* Twitter */}
                      &lt;meta property=&quot;twitter:card&quot; content=&quot;summary_large_image&quot;/&gt;
                      &lt;meta property=&quot;twitter:url&quot; content=&quot;https://example.com/&quot;/&gt;
                      &lt;meta property=&quot;twitter:title&quot; content={this.state.trackData.title}/&gt;
                      &lt;meta property=&quot;twitter:description&quot; content={this.state.trackData.desc}/&gt;
                      &lt;meta property=&quot;twitter:image&quot; content=&quot;/logo192.png&quot;/&gt;
                  &lt;/Helmet&gt;
              &lt;/div&gt;
           )
      }
  
  </code></pre>
  <p>pageTwo.jsx</p>
  <pre><code>                &lt;Helmet&gt;
                      {/* Primary Meta Tags */}
                      &lt;title&gt;XYZ&lt;/title&gt;
                      &lt;meta charset=&quot;utf-8&quot; /&gt;
                      &lt;meta name=&quot;title&quot; content=&quot;xyz&quot;/&gt;
                      &lt;meta name=&quot;theme-color&quot; content=&quot;#000000&quot; /&gt;
                      &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot; /&gt;
                      &lt;meta name=&quot;description&quot; content=&quot;xyz&quot;/&gt;
                      {/* Open Graph / Facebook */}
                      &lt;meta property=&quot;og:type&quot; content=&quot;website&quot;/&gt;
                      &lt;meta property=&quot;og:url&quot; content=&quot;https://example.com/&quot;/&gt;
                      &lt;meta property=&quot;og:title&quot; content=&quot;xyz&quot;/&gt;
                      &lt;meta property=&quot;og:description&quot; content=&quot;xyz&quot;/&gt;
                      &lt;meta property=&quot;og:image&quot; content=&quot;/logo192.png&quot;/&gt;
                      {/* Twitter */}
                      &lt;meta property=&quot;twitter:card&quot; content=&quot;summary_large_image&quot;/&gt;
                      &lt;meta property=&quot;twitter:url&quot; content=&quot;https://example.com/&quot;/&gt;
                      &lt;meta property=&quot;twitter:title&quot; content=&quot;xzy&quot;/&gt;
                      &lt;meta property=&quot;twitter:description&quot; content=&quot;xzy&quot;/&gt;
                      &lt;meta property=&quot;twitter:image&quot; content=&quot;/logo192.png&quot;/&gt;
                  &lt;/Helmet&gt;
  </code></pre>
  <blockquote>
  <p>&quot;react&quot;: &quot;^17.0.1&quot;<br />
  &quot;react-helmet-async&quot;: &quot;^1.0.9&quot;,</p>
  </blockquote>
  <p>I'm using django for backend</p>
  <p>It is working in development mode but not in production mode. my web app doesn't have any metatags, I don't understand, how react-helmet-async is working?</p>
  <p>Is this kind of metatags are shareable?</p>
  <p>what is the alternative solution for such kind of work?</p>