javascript - 如何使用服务器渲染 + 流在 React 中管理标题、元标记等?

标签 javascript reactjs title redux meta

有些图书馆管理<head>标签,例如:

react-helmet

react-document-title

react-doc-meta

但是所有这些库都在服务器渲染上共享相同的 API:Rewind

您首先使用 renderToString() 生成组件树然后你调用library.rewind()得到<head>数据。

当你使用 react-dom-stream 时问题就来了流式传输组件树而不是将它们呈现为字符串。你不能 rewind因为流还没有被消费,当它被消费时,为时已晚。

这里应该实现什么方法?

最佳答案

不幸的是,正确呈现元标记的一般要求意味着您首先必须准备好主要内容,以便正确识别每个元标记的内容。您看到的这个问题与 React 并不严格相关,但更多的是因为您必须在性能和内容标记准确性之间进行权衡。

一个原始的解决方案会涉及在发送到客户端(在本例中为浏览器)之前对 HTML block 进行字符串替换作为后处理器,但这实际上会消除流式页面给您带来的性能提升.

否则,您需要实现一种方法来预先检索基本的主要内容并在流式响应之外或之前生成元标记 - 所以您会在那里做出一些妥协。

另一种解决方案 是呈现为字符串,实现元标记修改的全部功能,然后利用某些缓存层(如 Varnish)或 Redis 或 Memcached 中每个页面的简单键值存储。

关于javascript - 如何使用服务器渲染 + 流在 React 中管理标题、元标记等?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36495589/

相关文章:

ios - 更改未在 Interface Builder 中创建的 UIButton 的文本

javascript - Angular2/JavaScript - 如何显示所有 localStorage 保存的变量并获取所有键的总长度?

javascript - 如何在 div 加载内容时发出警报

javascript - FormData 在数组中追加项目

reactjs - 在react元素中渲染null阻止我使用css的:empty selector

reactjs - 升级到 React 16.9 时 - 出现错误 : "Please update the following components: t"

java - 根据条件忽略RequestBody值

javascript - 如何使用html代码制作响应式框?

android - 如何从带有对话框主题的扩展 ActionBarActivity 或 AppcompatActivity 的 Activity 中删除标题栏

android - 操作菜单 : Show Title AND Icon