如何在React中使用服务器渲染+流式传输来管理标题、元标记等？

Question

14

有一些管理 <head> 标签的库，例如：

但是所有这些库在服务器端渲染时都使用相同的 API：Rewind。

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

当您使用 react-dom-stream 流式传输组件树而不是将它们呈现为字符串时，问题就出现了。您不能执行 rewind，因为流尚未被消耗，等到它被消耗时已经为时过晚。

这里应该采取什么方法？

- Félix Sanz

1

我强烈推荐尝试使用Nextjs。它可以处理路由、服务器端渲染以及操作<head>标签。 - blueberry_chopsticks

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Cameron · Accepted Answer

很不幸，正确呈现meta标签的一般要求意味着您首先必须有您的主要内容才能正确地识别每个meta标签的内容。您看到的这个问题与React没有严格相关，而更多的是因为您必须在性能和内容标记准确性之间进行权衡。

一个原始的解决方案可能涉及将HTML块作为后处理器上的字符串替换，然后再发送到客户端（在这种情况下是浏览器），但这实际上会消除从流式页面获得的性能增益。

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

另一个解决方案是将其呈现为字符串，实现完整的元标记修改功能，然后利用像Varnish这样的缓存层或Redis或Memcached中每个页面的键值存储。