如何在React中管理标题,元标记等服务器渲染+流媒体？

Question

有一些库管理<head>标签,例如:

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

首先使用生成组件树renderToString(),然后调用library.rewind()以获取<head>数据.

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

这里应该采用什么方法？

Answer 1

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

一个原始的解决方案将涉及在发送到客户端（本例中为浏览器）之前将 HTML 块作为后处理器进行字符串替换之类的操作，但这实际上会消除流式页面所带来的性能增益。

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

另一种解决方案是渲染为字符串，实现元标记修改的全部功能，然后利用一些缓存层（例如 Varnish）或在 Redis 或 Memcached 中简单地存储每个页面的键值。