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

问：

我有一个完整的网站，前端是用 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
})

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

这可能吗，或者有人有更好的主意吗？谢谢！！

node.js reactjs 服务器端渲染元标记

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

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

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

Can I render only meta tags as SSR in my website?

评论

评论