React Meteor 打开图形标签答案

【问题标题】：React Meteor open graph tagsReact Meteor 打开图形标签
【发布时间】：2018-01-19 01:38:03
【问题描述】：

如何使用流星和 react/react-router 从服务器端渲染打开的图形标签？

我不明白如何将 react-helmet 与流星和 react-router 一起使用。

谢谢

编辑：

我用 react 构建了一个流星应用程序。结构如下：

客户端/main.js
client/main.html ---> 我在 div id 上呈现应用程序：并获得了基本的 html 标记，如 head

imports/startup/client/routes.jsx ---> react-router 的路由逻辑

类似：

const myRoutes = (
    <Router history={browserHistory}>
      <Route path="/" component={App}>
          <IndexRoute component={Home}/>
          <Redirect from='*' to='/404' />
      </Route>
    </Router>
);

及以后：

ReactDOM.render(routes, document.getElementById('app'));

（其中 app 是我的 html 文件中的 div id）

...

服务器/main.js

...

（非常简单）

所以...我不了解 react-helmet 文档中的服务器部分。

"... 作为字符串输出" ? “...作为 React 组件”？

我必须从服务器端“重新渲染”html 文件？我的意思是......在文档中，看起来服务器返回一个 var 作为 html 标记结构...... 我不清楚，我不知道这是否适合我的情况。

编辑： 这篇文章帮助我解决了我的问题： https://labs.redantler.com/meteor-react-ssr-52284322c2f1#.m9i4d0pal

【问题讨论】：

你能包含你尝试做的代码吗？ react-helmet 文档似乎非常简单地说明了如何执行此操作：github.com/nfl/react-helmet#server-usage
我编辑了我原来的问题。

标签： reactjs meteor react-router

【解决方案1】：

在客户端，当您渲染 React 组件时，您有一个 DOM，并且您的 DOM 节点/元素会为每个组件（及其部分）创建。

ReactDOM.render(<App />, document.getElementById('root'))

虽然不是必需的，但服务器端呈现的目的是在 HTML 响应中发送页面的标记。这对于不让 JavaScript 在其浏览器中运行的人以及为您的内容编制索引的机器人（至少是那些不会运行您的 JavaScript 的机器人）非常有用。

现在，在服务器上，没有 DOM，因此当您为 React 组件渲染初始标记时，您可以使用 renderToString 方法将它们渲染为字符串。

import { renderToString } from "react-dom/server"

const markup = renderToString(<App />)

然后需要将该标记插入到您将发送给用户的 HTML 中。

const html = `
  <!doctype html>
  <html>
    <head></head>
    <body>
      <div id='root'>${html}</div>
      <script src="/static/bundle.js"></script>
    </body>
  </html>`

res.send(html);

现在，react-helmet 正在做的是，在将 React 应用程序呈现为字符串之后，调用 rewind 方法来获取由 <Helmet> 组件呈现的各种 <head> 值。

const head = Helmet.rewind()

然后，您可以将所需的值插入到html 模板中，它们将包含在发送给用户的 HTML 中。因为开放图标签是元标签，它们将包含在head 变量的meta 属性中。

const html = `
  <!doctype html>
  <html>
    <head>
      ${head.meta.toString()}
    </head>
    <body>
      <div id='root'>${html}</div>
      <script src="/static/bundle.js"></script>
    </body>
  </html>`

【讨论】：

好的，谢谢，我更清楚了。但是，我不确定……“res.send(html);”关注快递服务器还是更“低级”的东西？还是应该与流星有关？我要这样挖。谢谢。
res.send 来自express。