title: Can I render only meta tags as SSR in my website?
body: <p>I have a complete website built with React for frontend and NodeJs + Express for backend. My need is to have dynamic OG (Opengraph) Tags for a specific route, which used by specific component.</p>
  <p>Since it will be difficult to me to convert this component to SSR, because it's a dynamic component that also used for another page such as real time component (that changes as the user input) so I don't think it should be rendred with SSR, I came up with idea that I don't know if it's possible, and it's to render only meta tags as SSR.</p>
  <p>This is relevant code:</p>
  <p><strong>Frontend - React:</strong></p>
  <p>The route:</p>
  <pre><code>&lt;Route exact path=&quot;/DigitalCard/:cardId&quot; component={DigitalCard} /&gt;
  </code></pre>
  <p>This is <code>DigitalCard</code> Component:</p>
  <pre><code>export default class DigitalCard extends Component {
  
      constructor(props) {
          super(props);
          this.state = {
              card: null
          }
      }
  
      componentDidMount() {
        const cardId = this.props.match.params.cardId;
        axios.get(serverApiUrl + '/' + cardId)
           
           // response.data is server's api as json
           .then(response =&gt; this.setState({ card: response.data }))
           .catch(...);
      }
  
      cardFactoryByDesign = (card) =&gt; {
          // Create the design of the card, Uses eventually a lot of help components.
      }
  
      render() {
          let card = this.state.card;
          return (
              &lt;MetaData
                 name={card.Name}
                 description={card.Name}
                 ogUrl={clientUrl + &quot;/&quot; + card.cardId}
                 imgUrl={card.CardImage}
              /&gt;
              { this.cardFactoryByDesign(card) }
          )
      }
  }
  </code></pre>
  <p>And this is <code>MetaData</code> Component:</p>
  <pre><code>import Helmet from &quot;react-helmet&quot;;
  import MetaTags from 'react-meta-tags';
  
  export default function MetaData(props) {
      const [meta] = useState({
          name: props.name,
          description: props.description,
          ogUrl: props.ogUrl,
          imgUrl: props.imgUrl
      });
  
      return (
          &lt;&gt;
              &lt;MetaTags&gt;
                  &lt;meta name=&quot;title&quot;              content={meta.name}        /&gt;
                  &lt;meta name=&quot;description&quot;        content={meta.description} /&gt;
                  &lt;meta property=&quot;og:title&quot;       content={meta.name}        /&gt;
                  &lt;meta property=&quot;og:image&quot;       content={meta.imgUrl}      /&gt;
                  &lt;meta property=&quot;og:description&quot; content={meta.description} /&gt;
                  &lt;meta property=&quot;og:url&quot;         content={meta.ogUrl}       /&gt;
              &lt;/MetaTags&gt;
              &lt;Helmet&gt;
                  &lt;title&gt;{meta.name}&lt;/title&gt;
                  &lt;meta name=&quot;title&quot;              content={meta.name}        /&gt;
                  &lt;meta name=&quot;description&quot;        content={meta.description} /&gt;
                  &lt;meta property=&quot;og:title&quot;       content={meta.name}        /&gt;
                  &lt;meta property=&quot;og:image&quot;       content={meta.imgUrl}      /&gt;
                  &lt;meta property=&quot;og:description&quot; content={meta.description} /&gt;
                  &lt;meta property=&quot;og:url&quot;         content={meta.ogUrl}       /&gt;
              &lt;/Helmet&gt;
          &lt;/&gt;
      );
  }
  </code></pre>
  <p><strong>Backend - Nodejs + Express:</strong></p>
  <pre><code>router.get('/:cardId', async (req, res) =&gt; {
    try {
      let visitCard = await VisitCard.findOne({ _id: req.params.cardId });
      if (visitCard)
        return res.status(200).json(visitCard);
      else 
        ...
      }
    } catch (error) {
        ...
    }
  });
  </code></pre>
  <p>This is my existing code so far.
  Now, I'm asking if I can do something like this in my backend:</p>
  <pre><code>const pathToIndex = path.join(__dirname, '../views/metaTags.html');
  router.get('/getCardMetaTags', (req, res) =&gt; {
    const TITLE, DESCRIPTION, IMAGE, URL = ...
    res.send('index', { title: TITLE, description: DESCRIPTION, image: IMAGE, url: URL }); // Not Quite sure if send / render / anything else
  })
  </code></pre>
  <p>And inside <code>metaTags.html</code> write with html the <code>&lt;head&gt;</code> section with all of the meta tags, and when I request the API on the client side, I will also send somehow this section.</p>
  <p>Is this possible or anyone have better idea? Thank you !!</p>