zoukankan      html  css  js  c++  java
  • 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树。
  • 相关阅读:
    python中filter、map、reduce的区别
    Python属性和内建属性
    3分钟学会Python 针对Excel操作
    python重要函数eval
    python中用修饰器进行异常日志记录
    python 生成器中的send、移动平均值、列表表达式相关
    python中如何将字符串连接在一起,多倍的字符串如何输出
    Python将一个已知的utc时间字符串转换为东八区时间
    Python有参函数的使用
    Linux--虚拟环境
  • 原文地址:https://www.cnblogs.com/crazycode2/p/13368598.html
Copyright © 2011-2022 走看看