And parse it when the component mounts:
\n\nvar data = JSON.解析(文档.getElementById(“数据”).innerHTML);\nWe just saved ourselves a round trip to the server. We will see the trade-offs in a bit.
\n\n想象一个需要动态生成HTML的场景.
\n\n如果我们正在构建一个在线计算器，用户发出这样的查询 /计算/ 34 + 15 (省略URL转义)我们需要处理查询, 评估结果, respond with generated HTML.
\n\n我们生成的HTML在结构上非常简单，一旦生成的HTML被提供，我们不需要反应来管理和操作DOM.
\n\nSo we are just serving HTML 和 CSS content. 你可以使用 renderToStaticMarkup 实现这一点的方法.
路由将完全由服务器处理，因为它需要为每个结果重新计算HTML, 尽管CDN缓存可以用来更快地提供响应. CSS文件也可以被浏览器缓存，以便更快地加载后续页面.
\n\nImagine the same scenario as the one described above, 但这一次我们需要一个功能齐全的客户端反应应用程序.
\n\nWe are going to perform the 第一次呈现 然后将HTML内容和JavaScript文件一起发回服务器. 反应会 再水化 服务器呈现的标记和应用程序将从此时开始像企业社会责任应用程序一样运行.
\n\n反应提供了 内置的方法 要执行这些操作.
\n\n第一个请求由服务器处理，随后的呈现由客户端处理. T在这里fore, such apps are called 通用反应应用 (呈现 on both server 和 client). 处理路由的代码可能在客户端和服务器上分开(或重复).
\n\nCode splitting is also a bit tricky since 反应DOMServer 不支持反应.懒惰的, so you may have to use something like 可加载的组件.
It should also be noted that 反应DOMServer only performs a shallow render. 换句话说, 尽管会调用组件的呈现方法, the life-cycle methods like componentDidMount 没有被调用. 因此，您需要重构代码，以便使用另一种方法向组件提供数据.
这就是像下一个JS这样的框架出现的地方. 它们掩盖了与SSRH中路由和代码分割相关的复杂性，并提供了更流畅的开发人员体验. 但是，当涉及到页面性能时，这种方法产生了不同的结果.
\n\n如果我们能在用户请求之前呈现网页会怎么样? 这可以在构建时完成，也可以在数据更改时动态完成.
\n\n然后，我们可以在CDN上缓存生成的HTML内容，并在用户请求时更快地提供它.
\n\n预呈现是在用户请求之前呈现内容. 这种方法可以用于博客和电子商务应用程序，因为它们的内容通常不依赖于用户提供的数据.
\n\n我们可能希望预渲染的HTML在客户端渲染时是一个功能齐全的反应应用.
\n\n在第一个请求被服务后，应用程序将表现得像一个标准的反应应用程序. 该模式在路由和代码分割功能上与SSRH类似.
\n\nThe moment you have been waiting for has arriv[ed. 是决战的时候了. 让我们来看看这些渲染路径是如何影响web性能指标的，并决定哪个是赢家.
\n\n在这个矩阵中, 我们根据每个渲染路径在性能指标中的表现为其分配分数.
\n\nThe score ranges from 1 to 5:
\n\n1 =不满意 \n2 =差\n3 =适中\n4 =好\n5 =优秀
\n\n| \n | TTFB 第一个字节的时间\n | \n 连结控制协定 最大含量涂料\n | \n 创科实业 互动时间\n | \n 包大小 \n | \n 总计 | \n
|---|---|---|---|---|---|
| 企业社会责任 | \n5 HTML can be cached on a CDN | \n 1 Multiple trips to the server to fetch HTML 和 data | \n 2 Data fetching + JS execution delays | \n 2 All JS dependencies need to be loaded before render | \n 10 | \n
| 企业社会责任B | \n4 HTML可以缓存，因为它不依赖于请求数据 | \n 3 Data is loaded with application | \n 3 JS必须在交互之前被获取、解析和执行 | \n 2 All JS dependencies need to be loaded before render \n | \n 12 | \n
| SSRS | \n3 HTML is generated on each request 和 not cached | \n 5 No JS payload or async operations | \n 5 Page is interactive immediately after first paint \n | \n 5 Contains only essential static content \n | \n 18 | \n
| SSRH | \n3 HTML is generated on each request 和 not cached | \n 4 第一次渲染会更快，因为服务器渲染了第一个通道 | \n 2 较慢，因为JS需要在第一次HTML解析+绘制后水合物DOM | \n 1 Rendered HTML + JS dependencies need to be downloaded | \n 10 | \n
| PRS | \n5 HTML缓存在CDN上 | \n 5 No JS payload or async operations | \n 5 Page is interactive immediately after first paint | \n 5 Contains only essential static content | \n 20 | \n
| PRH | \n5 HTML缓存在CDN上 \n | \n 4 第一次渲染会更快，因为服务器渲染了第一个通道 | \n 2 较慢，因为JS需要在第一次HTML解析+绘制后水合物DOM | \n 1 Rendered HTML + JS dependencies need to be downloaded | \n 12 | \n
Pre-rendering to static content (PRS)导致 教学质量最好的 而服务器端水合渲染(SSRH)或客户端渲染(企业社会责任)可能会导致令人印象深刻的结果.
\n\nIt’s also possible to adopt multiple approaches for different parts of the website. 例如, 这些性能指标对于面向公众的网页来说可能是至关重要的，这样它们就可以更有效地建立索引, 然而，一旦用户登录并看到私人帐户数据，它们可能就不那么重要了.
\n\n根据您想要处理数据的位置和方式，每个渲染路径都有权衡. 重要的是，工程团队能够清楚地看到并讨论这些权衡，并选择一种能够最大限度地提高用户满意度的架构.
\n\n虽然我试图涵盖当前流行的技术，但这并不是一个详尽的分析. I highly recommend reading 这篇文章 谷歌的开发人员讨论了流媒体服务器渲染等其他高级技术, trisomorphic呈现, 以及动态呈现(为爬虫和用户提供不同的响应).
\n\n在构建内容丰富的网站时，需要考虑的其他因素包括 content management system (CMS)为您的作者，并能够轻松地生成/修改社交媒体预览和 优化图片 for varying screen sizes.
\n","as":"div","isContentFit":true,"sharingWidget":{"url":"http://nmp.hidekoquanyin.net/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://nmp.hidekoquanyin.net/developers"},"publicUrl":"http://nmp.hidekoquanyin.net/developers/blog"},"hashtags":"反应,搜索引擎优化"}}> < /脚本