如何在React中管理标题、元标签等，使用服务器渲染+流媒体

How to manage title, meta tags, etc, inside React with server rendering + streaming?

本文关键字：服务器流媒体标签 React 管理标题更新时间：2024-03-16

有一些库管理<head>标记，如：

反作用头盔

反应文件标题

反应文档元

但所有这些库在服务器呈现上共享相同的API：回放。

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

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

这里应该采用什么方法？

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

一个基本的解决方案包括在发送到客户端（本例中为浏览器）之前，在HTML的blob上作为后处理器进行字符串替换，但这将从根本上消除流式页面的性能增益。

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

另一个解决方案是渲染到字符串，实现metatag修改的全部功能，然后使用一些缓存层，如Varnish，或者只是Redis或Memcached中每个页面的键值存储。