react 服务器端渲染

服务器端渲染 vs 客户端渲染

1.服务器端渲染需要消耗更多的服务器资源(CPU，内存等)

2.客户端渲染可以将静态资源部署到cdn上，实现高并发

3.服务端渲染对SEO更友好

 

react 服务器端渲染的实现

1.构建编译与运行环境

安装 babel-node

npm install babel-cli -g

安装编译 react 需要的组件

npm install babel-preset-react -S
npm install babel-preset-env -S
npm install babel-plugin-transform-decorators-legacy -S

在 package.json 中设置运行命令：

cross-env NODE_ENV=test nodemon --exec babel-node src/server.js

cross-env: 跨平台设置环境变量

nodemon: 监视文件的改变并重新运行命令

 

react-dom/server包里面有两个方法 renderToString 和 renderToStaticMarkup

renderToString 和 renderToStaticMarkup 的主要作用都是将 React Component 转化为 HTML 的字符串

 

renderToString: 将React Component 转化为 HTML 字符串，生成的 HTML 的 DOM 会带有额外属性：各个 DOM 会有 data-react-id 属性，第一个DOM会有data-checksum属性

renderToStaticMarkup: 同样是将 React Component 转化为 HTML 字符串，但是生成HTML的DOM不会有额外属性，从而节省HTML字符串的大小

 

刚刚说的都是过去时，是 react15 版本的事情

从16开始 react 去掉了 data-react-id 和 data-checksum

在 React16 中，客户端渲染使用差异算法检查服务端生成的节点的准确性。相比于React15更宽松；例如，不要求服务端生成的节点属性与客户端顺序完全一致。当React16的客户端渲染器检测到节点不匹配，仅仅是尝试修改不匹配的HTML子树，而不是修改整个HTML树。