如何使用 SSR 在我的网站中仅呈现一条路线向其添加元标记？

如何解决如何使用 SSR 在我的网站中仅呈现一条路线向其添加元标记？

我被一个问题困扰了一段时间……我有一个完整的网站，前端使用 React 构建，后端使用 NodeJs+Express 构建。我的需要是在我的网站中有一条路线，它将呈现为 SSR。我已经已经用react和它的所有帮助组件构建了这条路线，但是因为我需要向它添加OpenGraph元标记（对于facebook，whatsapp ...）发现SSR 是最好的解决方案（尝试使用 react-helmets 和其他库，但没有一个适用于 OpenGraph 图像）。

还有一点很重要，我使用了这个组件两次，一次在那个路由中，一次在网站的另一部分，所以我不认为将整个组件转换为 SSR成为答案。

我到底能做什么？任何解释和一些代码都会很棒。

以下是该问题的一些相关代码：

后端 - Nodejs + Express：

API 路由（我在 JSON 中获取我的字段，并在前面创建页面）：

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) {
      ...
  }
});

前端 - 反应：

路由（react-router-dom）：

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

DigitalCard 组件：

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 组件：

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>
        </>
    );
}