reactjs – 同构/普遍呈现React 15应用程序中断Cloudflare HTTP
|
我有一个同构/通用React应用程序,这意味着它由服务器在服务器上呈现,为客户端,单页面应用程序用户体验提供支持.
我使用Cloudflare配置此应用程序的DNS,并使用其“橙色云”功能来加速和保护我的网站流量,如下图和in their support article中所述：
从链接到文章：“Cloudflare可以在两种模式下运行 – 仅限DNS(未使用;”灰色云“)和作为HTTP代理(”橙色云“),具有我们的安全性,CDN和性能功能. 我发现使用React 15和Cloudflare的“橙色云”HTTP代理功能运行我的应用程序会导致错误：
链接错误的文本：
此ID可能是指我的页面的head标记： <!doctype html> <html lang="en-us" data-reactroot="" data-reactid="1" data-react-checksum="-1233854461"><head data-reactid="2">... 我不会在React 14中遇到这个问题. 我在使用我的应用程序的原始,非DNS地址时没有遇到此错误,当我切换到“灰色云”以使用Cloudflare作为DNS服务时,我也没有得到它. 禁用服务器端呈现时,我不会遇到此问题. 当我谷歌链接到“实际”错误的文本时,我发现this Github thread确认这与服务器端呈现有关. 但是,我的情况稍有不同：该线程的作者遇到错误,其中“无法找到元素”ID引用样式标记,而在我的情况下,未展开的元素ID引用头标记. 当我谷歌生产“包装”错误的文本时,我发现this Github thread确认这与Cloudflare的HTTP代理有关. This comment说：“如果你正在使用CloudFlare,请禁用自动缩小HTML.” 到目前为止,我无法弄清楚如何做到这一点.我很难找到关于Cloudflare究竟对HTTP代理做什么的好信息,以及我如何配置它. 问题： >为什么会发生这个错误？ 解决方法
服务器上的React需要将应用程序呈现为对浏览器有意义的HTML字符串.同时,浏览器中的React需要阅读此HTML并理解它与JS代码的关系：它需要以非常详细的方式识别哪个DOM树来自哪个React组件.因此,实际上,中间HTML是服务器上的React和客户端上的React之间的序列化格式,即使在没有React的情况下,它也需要对浏览器有意义.
当您启用高级Cloudflare功能时,它会将HTML视为“常规”HTML,而不是花哨的服务器端呈现组件.我对一件可能出错的事情毫无根据的猜测是剥离HTML评论.一般来说,这对于缩小是很自然的事情.但是React使用HTML注释来放置一个<！ - empty - >占位符,其中React组件返回null.当然,剥离这些休息React. Cloudflare可以以更低的成本更快地提供服务网站.他们有各种各样的工具来实现这一点,参见their introduction guide.缩小HTML是完全自然的,不幸的是它打破了你的用例,但这就是我们得到的节点和属性的含义以及在我们的HTML中改变它们的灵活性没有严格定义. 我认为现在最直接的方式是disable HTML minification in Cloudflare settings. （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
