如何使用 SSR 在我的网站中仅渲染一条路线（以向其添加元标记）？

Question

我在一个问题上停留了一段时间……我有一个完整的网站，使用 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>
        </>
    );
}