node.js - How can I render only one route in my website with SSR (to add meta tags to it with)?

Question

I stuck for a while with an issue... I have a complete website built with React for frontend and NodeJs+Express for backend. My need is to have one route in my website, which will be rendered as SSR. I have allready built this route with react and all of it's help components, but since I need to add OpenGraph meta tags to it (for facebook, whatsapp...) found that SSR is the best solution (Tried with react-helmets and other library but none of them worked for OpenGraph images).

Also it's important to say, that I use this component twice, once in that route and again in another part of the website, so I don't think that converting the whole component to SSR will be the answer.

What exactly can I do? Any explanations and some code will be awesome.

Here is some relevent code for the problem:

Backend - Nodejs + Express:

Route for the API (I get my fields in JSON, and create the page in the front):

router.get('/:cardId', async (req, res) => {
  try {
    let visitCard = await VisitCard.findOne({ _id: req.params.cardId });
    if (visitCard)
      return res.status(200).json(visitCard);
    else 
      ...
    }
  } catch (error) {
      ...
  }
});

Frontend - React:

The route (react-router-dom):

<Route exact path="/DigitalCard/:cardId" component={DigitalCard} />

DigitalCard Component:

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 => this.setState({ card: response.data }))
         .catch(...);
    }

    cardFactoryByDesign = (card) => {
        // Create the design of the card, Uses eventually a lot of help components.
    }

    render() {
        let card = this.state.card;
        return (
            <MetaData
               name={card.Name}
               description={card.Name}
               ogUrl={clientUrl + "/" + card.cardId}
               imgUrl={card.CardImage}
            />
            { this.cardFactoryByDesign(card) }
        )
    }
}

MetaData Component:

import Helmet from "react-helmet";
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 (
        <>
            <MetaTags>
                <meta name="title"              content={meta.name}        />
                <meta name="description"        content={meta.description} />
                <meta property="og:title"       content={meta.name}        />
                <meta property="og:image"       content={meta.imgUrl}      />
                <meta property="og:description" content={meta.description} />
                <meta property="og:url"         content={meta.ogUrl}       />
            </MetaTags>
            <Helmet>
                <title>{meta.name}</title>
                <meta name="title"              content={meta.name}        />
                <meta name="description"        content={meta.description} />
                <meta property="og:title"       content={meta.name}        />
                <meta property="og:image"       content={meta.imgUrl}      />
                <meta property="og:description" content={meta.description} />
                <meta property="og:url"         content={meta.ogUrl}       />
            </Helmet>
        </>
    );
}

question from:https://stackoverflow.com/questions/65847748/how-can-i-render-only-one-route-in-my-website-with-ssr-to-add-meta-tags-to-it-w

Answer 1

Waitting for answers