1. 客户端请求html,服务器将在服务端渲染好(renderToString)的html(HTMLstring)返回给客户端,这时候的html是完全静态的,所有跟浏览器相关的操作都是无效的,并不会被绑定事件,例如点击事件。服务端渲染的时候会将真正的react应用放在\<script\>标签中。
2. 客户端边渲染html,等加载到存放真正的react应用的\<script\>标签时,客户端会运行这个js文件,js中的react代码在浏览器会重新执行(也就是ReactDom.hydrate 的流程: 跟服务端返回的html比对,相同则忽略或者有事件的话会加上对应的事件,不同则报警告并且直接替换原来的元素)
3. js中的代码会结关浏览器的页面操作。如果用户使用路由切换页面,就只涉及到客户端相关的路由渲染了,不再涉及到服务端渲染
所以如果能保证相同的话元素渲染的话,服务端渲染就能保证用户很快能看到渲染出来的页面,只不过页面元素没有事件处理,后面执行 index.js 的时候会再给元素加上事件