客户端渲染过程:
1)一个html请求;
2)服务器返回html请求;
3)下载css和js文件;
4)运行js文件,并且发出请求要求得到渲染的数据;
5)服务器返回数据;
6)客户端接受数据,并将数据加载到v-dom,然后再渲染页面;
服务端渲染过程:
1)一个html请求;
2)服务器接收到请求,并内部发出请求数据;
3)将数据渲染到组件,并通过渲染函数变成html字符串,挂载到视图模板;
4)返回已经渲染好的页面;
5)加载js和css文件;
6)已经渲染好的组件已经存在页面中;
服务端渲染的优点:
1)渲染速度快;2)减少客户端向服务端请求的耗时;
渲染函数:
背景:在客户端渲染中,由于有dom的存在,可以有ReactDOM.render方法将v-dom渲染到dom中;但在服务器中,由于没有dom的存在,因此不能用过此种途径将v-dom渲染到页面,因此有使用渲染函数;
渲染函数:适用于服务端,主要是在服务端将可视数据渲染到已经存在的组件中,并将已经渲染的组件转成html字符串,以方便挂载到视图模板中;
renderTostring:用来将v-dom转变成html字符串并返回;
语法:ReactDOMServer.renderToString(V-dom);
特点:参数中不带表示dom位置的参数;
返回的html字符串类似于:
<div data-reactid="" data-react-checksum="">...</div>
data-reactid:用来区分其他dom节点的标志,且可用于寻找和更新dom节点用;
data-react-checksum:容许客户端复用服务器的dom结构,且只存在于服务端和存在于根节点中;
renderToStaticMarkup:与renderToString用法一样,知识返回的数据不包含data-reactid和data-react-checksum这两个属性;
区别:
renderToStaticMarkup:不打算将v-dom渲染到客户端的页面上,
用途:1)制作电子邮件;2)将html转成pdf;3)组件测试;
renderToString:将v-dom渲染到客户端的页面上,适用于大多数情况;