对于客户端交互式React应用程序,您还需要渲染该应用程序客户端。通常,此代码与您在服务器上运行的代码相同, 因此没有多余的代码
。这是相同的代码。您可能会问自己,在客户端和服务器上进行渲染是否都可能会过头,但是从性能和SEO的角度来看,这是很合理的。
ReactDOMServer.renderToString(<MyApp foo={bar}/>)基本上只渲染带有标记的字符串。没有javascript或任何魔术。只是普通的旧HTML。但是,呈现的标记具有大量的ReactID属性,这些属性随后将在客户端上用于生成初始的虚拟DOM和附加事件。
当您再次在客户端上呈现应用程序时,在服务器端呈现标记被注入到服务器的同一DOM元素上,React不需要重新绘制整个应用程序。它只是创建一个新的Virtual
DOM树,将其与初始Virtual
DOM树进行比较,并进行必要的DOM操作(如果有)。首先,虚拟DOM的概念使React如此之快。在同一过程中,您在应用程序中定义的任何事件侦听器都将附加到已经呈现的标记上。
所有这些事情的发生都非常快。这样您就可以受益于搜索引擎将抓取的服务器端渲染页面(可以使用Varnish或类似方法缓存在服务器上),用户无需等待任何时间即可看到初始渲染,并且页面基本上适用于已禁用Javascript的用户。



