react服务端渲染

一. react服务端渲染实现流程

1、输入url网址向服务器请求页面

2、服务器接收请求,从数据库获取数据与静态资源,渲染到html中返回

  • 服务器端需要安装react相关来将react组件转为html字符串
  • 服务器端需要安装webpack使资源文件可以引入node环境中

3、前段获取html后渲染到浏览器,请求html中静态资源后进行二次渲染

4、服务端渲染组件部分js需要单独放在一个目录下,通过一个出口提供模板字符串,webpack只打包该目录下的内容

   output的libraryTarget属性决定了输出文件被其他目录的引用方式(commonjs2可以通过require引入,具体看官方文档)

二. 环境搭建

1、服务器环境express

2、webpack下配置ES6环境与资源加载

  • 配置babel:.babelrc配置文件实现ES6环境支持
  • 配置webpack: webpack.config.js文件,配置css style babel的loader安装
    以及babel-core babel-preset-es2015 babel-preset-react等核心模块安装

3、loader是按照顺序对entry进行执行的,如果loader之间存在冲突会报错

babel已经包含jsx-loader所需模块,jsx由于无法解析import导致执行webpack报错

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容