Firebase http.function的服务器呈现页面与Create-React-App路由器结合使用



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

函数索引.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,我会得到仅从函数生成的标记,而不是从函数中使用新标题的反应组件。 这是一种正确的方法吗?

有几种方法可以使用。你要做的是取决于你想实现什么。

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

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

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

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

我相信有很多方法我现在想不起来。我建议你多读一些关于 React 和 Node 的文章,为自己找到最好的方法。

最新更新