Firebase http.function 的服务器渲染页面结合 Create-React-App 路由器答案

【问题标题】：Firebase http.function's server rendered page In conjunction with Create-React-App routerFirebase http.function 的服务器渲染页面结合 Create-React-App 路由器
【发布时间】：2018-01-30 20:46:44
【问题描述】：

是否可以从 firebase 函数插入/更新 html，连接到 firebase 托管的 Create-React-App 的路由，并为 React 页面预渲染 html 的元标记？在我的实验中：

函数的 index.js：

exports.productPage = functions.https.onRequest((req, res) => {
  const html = `<!doctype html>
    <head>
      <title>Function</title>
    </head>
    <body>
      <h5>FUNCTION</h5>
      <div id="root"></div>
    </body>
  </html>`
  res.status(200).send(html);
  })

反应路线：

<Route path='/product/:_id' component={ProductPage}/>

firebase.json：

"rewrites": [ {
   "source": "/product/**", "function": "productPage"
 } ]

如果我转到函数或主机的 url，我会得到标记，仅从函数生成，而不是用函数的新标题对组件做出反应。这是正确的做法吗？

【问题讨论】：

标签： node.js firebase google-cloud-functions firebase-hosting create-react-app

【解决方案1】：

您可以采用多种方法。您要做的取决于您要达到的目标。

使用您的方法，您需要以某种方式实现一个函数，该函数呈现和插入从云函数返回的 HTML。与其从函数返回 HTML 代码，不如考虑返回 JSON 结果，然后使用 React 解析和插入所需的标签。你可以使用react-helmet。

另一种方法是，如果您将 Firebase 用于您的数据库；您可以使用 Firebase Javascript SDK 在您的 React 组件上填充所需的数据。

另一种方法是您可以使用自己的 api 实现并使用 Fetch API 填充数据。

另一种方法是您可以将 Express 与 Cloud Functions 一起使用，并且您可以为 React 使用服务器端渲染中间件。

我敢肯定，我现在想不出很多方法。我建议您多阅读一些有关 React 和 Node 的内容，以找到最适合自己的方法。

【讨论】：

我的问题的关键点是留在 Create React 应用程序中，你把它纳入你的答案了吗？
是的，我做到了。我告诉你的所有方法都与 react 兼容。 create-react-app 只是帮助您创建和构建一个反应应用程序。 Fetch API 集成在 react 本身中。
感谢您的回复，您能否展示一个小示例，我如何将函数返回的 html 插入
我不建议您返回 html 并将其插入到 react as html 中。我建议你从 api 返回一个 json 或类似的数据，然后用 react 将这些数据呈现为 html。