我可以在我的网站中仅将元标记呈现为 SSR 吗？答案

【问题标题】：Can I render only meta tags as SSR in my website?我可以在我的网站中仅将元标记呈现为 SSR 吗？
【发布时间】：2021-04-18 23:34:10
【问题描述】：

我有一个完整的网站，前端使用 React，后端使用 NodeJs + Express。我的需要是为特定组件使用特定路由的动态 OG (Opengraph) 标签。

由于我很难将此组件转换为 SSR，因为它是一个动态组件，也用于另一个页面，例如实时组件（随着用户输入而变化），所以我认为它不应该是用 SSR 渲染，我想出了一个想法，我不知道它是否可能，它只是将元标记呈现为 SSR。

这是相关代码：

前端 - 反应：

路线：

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

后端 - Nodejs + Express：

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

这是我目前已有的代码。现在，我在问我是否可以在我的后端做这样的事情：

const pathToIndex = path.join(__dirname, '../views/metaTags.html');
router.get('/getCardMetaTags', (req, res) => {
  const TITLE, DESCRIPTION, IMAGE, URL = ...
  res.send('index', { title: TITLE, description: DESCRIPTION, image: IMAGE, url: URL }); // Not Quite sure if send / render / anything else
})

在metaTags.html 中用html 编写带有所有元标记的<head> 部分，当我在客户端请求API 时，我也会以某种方式发送此部分。

这是可能的还是有人有更好的主意？谢谢！！

【问题讨论】：

标签： node.js reactjs server-side server-side-rendering meta-tags

【解决方案1】：

很遗憾，如果没有 SSR，就无法做到这一点。只是因为 Facebook / Twitter / Google 爬虫不会执行 api 调用。你要记住的是，React 应用程序实际上只有一个路由和一个 html 文件（带有<div id="root"></div> 的那个），JS 接管并向浏览器提供选定的组件。一切都发生在浏览器/客户端级别，并且由于爬虫不执行 JS（仅 google 但不是第一次爬取，而且您必须添加 robots.txt、站点地图），它们只会看到您用于 React 的 html 模板应用程序。

这样你就有了 Gatsby.js (SSG) 和 Next.js (SSR 和 SSG) 框架。 React 本身没有 SEO 支持，你可能会看到在浏览器中加载了元数据，但它是由 JS 动态添加的。

【讨论】：

谢谢！你知道我该怎么做才能正常工作吗？一些好的解释和代码示例？还要记住 DigitalCard 组件以另一种方式在客户端使用，所以我不应该将该组件复制到后端。