通过学习Dell老师在慕课网React 服务器渲染原理解析与实践的课程,本人也模仿这完成了一个React的简易的ssr框架,这是github地址。并且对项目和学习成果做一个简单的总结。
下面是比较完整版的目录结构
├── README.md // 项目介绍
├── build // 打包配置文件夹
│ ├── webpack.base.js // 基础webpack配置
│ ├── webpack.client.js // 客户端webpack配置
│ └── webpack.server.js // 服务器webpack配置
├── package-lock.json // 项目配置自动生成
├── package.json // npm配置文件
└── src // 项目源代码夹
├── client // 客户端文件包入口
│ ├── dist // 自动生成文件夹
│ │ └── index.js // 自动生成外部引入js文件
│ └── index.js // 客户端js入口文件,用于将组建render到dom
├── common // 公共方法文件夹
│ └── withStyles.js // 用于生成带有服务器端渲染样式的高阶组件
├── components // 基础组件文件夹
│ └── header // 头部组件
│ │ ├── index.js // 头部组件的View
│ │ └── styles.scss // 头部组件的样式
├── container // 页面级别的组件容器
│ ├── App.js // 组件总入口用于包装redux的store数据
│ ├── Main.js // 顶级路由需要展示的组件
│ ├── headlines // 头条页面
│ │ ├── View.js // 视图
│ │ └── index.js // 导出文件
│ ├── help // 帮助页面
│ │ ├── View.js // 视图
│ │ └── index.js // 导出文件
│ ├── home // 首页
│ │ ├── View.js // 视图
│ │ ├── index.js // 导出文件
│ │ ├── store // 首页数据配置
│ │ │ ├── actions.js // 首页数据action
│ │ │ └── reducer.js // 首页数据reducer
│ │ └── styles.scss // 首页样式
│ ├── notFound // 404页面
│ │ ├── View.js // 视图
│ │ └── index.js // 导出文件
│ └── topics // 语雀文章页面
│ │ ├── View.js // 语雀文章视图
│ │ ├── index.js // 语雀文章导出页面
│ │ └── store // 语雀文章数据层
│ │ │ ├── actions.js // 语雀文章actions
│ │ │ └── reducer.js // 语雀文章reducer
├── favicon.ico // 网站favicon
├── request // axios封装文件夹
│ ├── baseConfig.js // axios基础配置
│ ├── clientConfig.js // 客户端axios配置
│ ├── index.js // 统一导出配置
│ └── serverConfig.js // 服务器端axios配置
├── routers // 路由封装文件夹
│ ├── ClientRouter.js // 客户端包装后的路由
│ ├── ServerRouter.js // 服务器端包装后的路由
│ └── index.js // 路由基础数据
├── server // 服务器文件夹
│ ├── dist // 服务器打包后的生成代码目录
│ │ ├── index.ejs //
│ │ └── index.js //
│ ├── index.ejs // 服务器渲染的ejs模板
│ ├── index.js // 服务器入口文件
│ └── utils.js // 服务器端所需要的工具js
└── store // store公共文件
├── index.js // 创建store
└── reducers.js // 总和reducer
可以看出目录还是比较全面的,那么下面看一下配置文件中都引入哪些第三方包
"dependencies": {
"axios": "^0.18.0", //
"ejs": "^2.6.1", //
"express": "^4.16.4", //
"express-http-proxy": "^1.5.0", //
"react": "^16.6.3", //
"react-dom": "^16.6.3", //
"react-helmet": "^5.2.0", // 组件的形式生成页面中title和meta相关标签
"react-redux": "^5.1.1", //
"react-router-config": "^4.4.0-beta.6", // 根据req.url来匹配对应的路由,render路由
"react-router-dom": "^4.3.1", //
"redux": "^4.0.1", //
"redux-thunk": "^2.3.0", // redux异步处理数据的中间件
"serve-favicon": "^2.5.0" //
},
"devDependencies": {
"@babel/core": "^7.1.6", // babel7已经移除了stage0相关
"@babel/plugin-proposal-class-properties": "^7.1.0",
"@babel/plugin-proposal-json-strings": "^7.0.0",
"@babel/plugin-syntax-dynamic-import": "^7.0.0",
"@babel/plugin-syntax-import-meta": "^7.0.0",
"@babel/plugin-transform-runtime": "^7.1.0",
"@babel/preset-env": "^7.1.6",
"@babel/preset-react": "^7.0.0",
"babel": "^6.23.0",
"babel-loader": "^8.0.4",
"babel-plugin-root-import": "^6.1.0",
"babel-preset-react": "^6.24.1",
"copy-webpack-plugin": "^4.6.0", // 复制静态文件
"css-loader": "^1.0.1", //
"isomorphic-style-loader": "^4.0.0", // 服务器用于渲染css至页面
"node-sass": "^4.10.0", //
"nodemon": "^1.18.6", // 监听node服务自动重启
"npm-run-all": "^4.1.3", // 并行启动多个npm命令
"sass-loader": "^7.1.0", //
"style-loader": "^0.23.1", //
"webpack": "^4.25.1", //
"webpack-cli": "^3.1.2", //
"webpack-merge": "^4.1.4", // webpack合并方法
"webpack-node-externals": "^1.7.2" // 服务器端打包配置文件
}
git clone [email protected]:wuyxp/react-ssr.git
cd react-ssr
npm install
npm run dev
从上面的内容可以看出内容还是比较有难度,那么下面就以小步快跑的方式分别从头开始介绍知识点
-
服务器渲染与同构
-
在服务器端同样适用webpack打包
-
服务器渲染react组件
-
SSR框架引入react-router
-
SSR框架引入redux
-
SSR框架引入redux-thunk
-
适用axios进行统一的服务数据请求
-
适用context进行404和重定向处理
-
SSR框架引入css样式处理
-
SSR框架引入Helmet进行SEO优化
-
将SSR页面输出文件修改为ejs模板
-
SSR vs CSR
-
perrender架构说明