并在组件挂载时解析它:
\n\nvar data = JSON.解析(文档.getElementById(“数据”).innerHTML);\n我们只是省去了往返服务器的麻烦. 我们将看到一些权衡.
\n\n想象一个需要动态生成HTML的场景.
\n\n如果我们正在构建一个在线计算器，用户发出这样的查询 /计算/ 34 + 15 (省略URL转义)我们需要处理查询, 评估结果, 并使用生成的HTML进行响应.
\n\n我们生成的HTML在结构上非常简单，一旦生成的HTML被提供，我们不需要反应来管理和操作DOM.
\n\n所以我们只是提供HTML和CSS内容. 你可以使用 renderToStaticMarkup 实现这一点的方法.
路由将完全由服务器处理，因为它需要为每个结果重新计算HTML, 尽管CDN缓存可以用来更快地提供响应. CSS文件也可以被浏览器缓存，以便更快地加载后续页面.
\n\n想象一下与上面描述的相同的场景, 但这一次我们需要一个功能齐全的客户端反应应用程序.
\n\n我们将表演 第一次呈现 然后将HTML内容和JavaScript文件一起发回服务器. 反应会 再水化 服务器呈现的标记和应用程序将从此时开始像企业社会责任应用程序一样运行.
\n\n反应提供了 内置的方法 要执行这些操作.
\n\n第一个请求由服务器处理，随后的呈现由客户端处理. 因此，这样的应用程序被称为 通用反应应用 (在服务器端和客户端同时呈现). 处理路由的代码可能在客户端和服务器上分开(或重复).
\n\n代码分割也有点棘手，因为 反应DOMServer 不支持反应.懒惰，所以你可能需要使用类似 可加载的组件.
还应当指出的是 反应DOMServer 只执行浅渲染. 换句话说, 尽管会调用组件的呈现方法, 生命周期方法就像 componentDidMount 没有被调用. 因此，您需要重构代码，以便使用另一种方法向组件提供数据.
这就是像下一个JS这样的框架出现的地方. 它们掩盖了与SSRH中路由和代码分割相关的复杂性，并提供了更流畅的开发人员体验. 但是，当涉及到页面性能时，这种方法产生了不同的结果.
\n\n如果我们能在用户请求之前呈现网页会怎么样? 这可以在构建时完成，也可以在数据更改时动态完成.
\n\n然后，我们可以在CDN上缓存生成的HTML内容，并在用户请求时更快地提供它.
\n\n预呈现是在用户请求之前呈现内容. 这种方法可以用于博客和电子商务应用程序，因为它们的内容通常不依赖于用户提供的数据.
\n\n我们可能希望预渲染的HTML在客户端渲染时是一个功能齐全的反应应用.
\n\n在第一个请求被服务后，应用程序将表现得像一个标准的反应应用程序. 该模式在路由和代码分割功能上与SSRH类似.
\n\n你等待已久的时刻已经到来. 是决战的时候了. 让我们来看看这些渲染路径是如何影响web性能指标的，并决定哪个是赢家.
\n\n在这个矩阵中, 我们根据每个渲染路径在性能指标中的表现为其分配分数.
\n\n分1 ~ 5分:
\n\n1 =不满意 \n2 =差\n3 =适中\n4 =好\n5 =优秀
\n\n| \n | TTFB 第一个字节的时间\n | \n 连结控制协定 最大含量涂料\n | \n 创科实业 互动时间\n | \n 包大小 \n | \n 总计 | \n
|---|---|---|---|---|---|
| 企业社会责任 | \n5 HTML可以缓存在CDN上 | \n 1 多次访问服务器以获取HTML和数据 | \n 2 数据获取+ JS执行延迟 | \n 2 所有JS依赖都需要在渲染之前加载 | \n 10 | \n
| 企业社会责任B | \n4 HTML可以缓存，因为它不依赖于请求数据 | \n 3 数据被应用程序加载 | \n 3 JS必须在交互之前被获取、解析和执行 | \n 2 所有JS依赖都需要在渲染之前加载 \n | \n 12 | \n
| SSRS | \n3 HTML是根据每个请求生成的，而不是缓存的 | \n 5 没有JS负载或异步操作 | \n 5 页面在第一次绘制后立即具有交互性 \n | \n 5 只包含必要的静态内容 \n | \n 18 | \n
| SSRH | \n3 HTML是根据每个请求生成的，而不是缓存的 | \n 4 第一次渲染会更快，因为服务器渲染了第一个通道 | \n 2 较慢，因为JS需要在第一次HTML解析+绘制后水合物DOM | \n 1 渲染的HTML + JS依赖需要下载 | \n 10 | \n
| PRS | \n5 HTML缓存在CDN上 | \n 5 没有JS负载或异步操作 | \n 5 页面在第一次绘制后立即具有交互性 | \n 5 只包含必要的静态内容 | \n 20 | \n
| PRH | \n5 HTML缓存在CDN上 \n | \n 4 第一次渲染会更快，因为服务器渲染了第一个通道 | \n 2 较慢，因为JS需要在第一次HTML解析+绘制后水合物DOM | \n 1 渲染的HTML + JS依赖需要下载 | \n 12 | \n
预渲染为静态内容 (PRS)导致 教学质量最好的 而服务器端水合渲染(SSRH)或客户端渲染(企业社会责任)可能会导致令人印象深刻的结果.
\n\n也可以收养 针对网站不同部分的多种方法. 例如, 这些性能指标对于面向公众的网页来说可能是至关重要的，这样它们就可以更有效地建立索引, 然而，一旦用户登录并看到私人帐户数据，它们可能就不那么重要了.
\n\n根据您想要处理数据的位置和方式，每个渲染路径都有权衡. 重要的是，工程团队能够清楚地看到并讨论这些权衡，并选择一种能够最大限度地提高用户满意度的架构.
\n\n虽然我试图涵盖当前流行的技术，但这并不是一个详尽的分析. 我强烈推荐大家阅读 这篇文章 谷歌的开发人员讨论了流媒体服务器渲染等其他高级技术, trisomorphic呈现, 以及动态呈现(为爬虫和用户提供不同的响应).
\n\n在构建内容丰富的网站时，需要考虑的其他因素包括 内容管理系统 (CMS)为您的作者，并能够轻松地生成/修改社交媒体预览和 优化图片 对于不同的屏幕尺寸.
\n","as":"div","isContentFit":true,"sharingWidget":{"url":"http://workorder.lateand.com/react/react-seo-best-practices","title":"搜索引擎优化 With 反应: Best Practices 和 Strategies","text":null,"providers":["linkedin","推特","脸谱网"],"gaCategory":null,"domain":{"name":"developers","title":"工程","vertical":{"name":"developers","title":"开发人员","publicUrl":"http://workorder.lateand.com/developers"},"publicUrl":"http://workorder.lateand.com/developers/blog"},"hashtags":"反应,搜索引擎优化"}}> < /脚本