# e-react-ssr-redux

**Repository Path**: ymcdhr/e-react-ssr-redux

## Basic Information

- **Project Name**: e-react-ssr-redux
- **Description**: e-react-ssr-redux
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-08-06
- **Last Updated**: 2021-08-10

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## 项目说明
React + SSR + Redux + Webpack 实现一个简单的服务端渲染功能，并没有做复杂的 WWebpack 配置

## 项目使用
### 1、安装
```
> npm install 
```

### 2、调试
```
> npm run dev
```

### 3、配置
#### Webpack针对[服务端、客户端的配置](https://gitee.com/ymcdhr/e-code/tree/master/04-04-react-ssr/4-4-1/4-4-1/code/react-ssr)
1. 服务端Webpack配置：【参考示例代码】
2. 客户端Webpack配置：【参考示例代码】

#### package.json 监听 Node，自动打包
```
  "scripts": {
    "dev": "npm-run-all --parallel dev:*",
    "dev:server-run": "nodemon --watch build --exec \"node build/bundle.js\"",
    "dev:server-build": "webpack --config webpack.server.js --watch",
    "dev:client-build": "webpack --config webpack.client.js --watch"
  },
```


## 项目原理：
### 1、服务端渲染的特点
#### 1.1、客户端渲染存在的问题
1. 首屏等待时间长，用户体验差
2. 页面结构为空，不利于SEO

#### 1.2、服务端渲染优势
同构指的是客户端和服务端共用一份代码，最大程度实现代码复用。

浏览器发起请求 => 服务端接受请求 => 服务端渲染 html => 服务端发送 html => 客户端接管页面

#### 1.3、服务端渲染基本流程
1. 服务端启动HTTP服务；
2. 服务端通过renderToString方法渲染组件（转换为HTML字符串），返回给客户端；
3. 客户端拿到HTML文件进行解析渲染，然后下载脚本接管渲染。
4. 注意服务端渲染和客户端渲染共用一部分路由代码和Store状态代码。

![输入图片说明](https://images.gitee.com/uploads/images/2021/0810/133127_9c139504_9130428.png "屏幕截图.png")

### 2、[React-SSR 方案原理，参考示例代码](https://gitee.com/ymcdhr/e-code/tree/master/04-04-react-ssr/4-4-1/4-4-1/code/react-ssr)

#### 2.1、React-SSR 服务端渲染原理
1. 服务端启动HTTP服务；
2. 服务端渲染页面：renderToString
3. 服务端路由配置；【参考示例代码】

![输入图片说明](https://images.gitee.com/uploads/images/2021/0808/213223_397f48e1_9130428.png "屏幕截图.png")

4. 服务端Redux状态；【参考示例代码】
5. 服务端Store数据预取；注意服务器需要预取数据，而且要和路由进行结合；

![输入图片说明](https://images.gitee.com/uploads/images/2021/0808/213253_7d9006ef_9130428.png "屏幕截图.png")

#### 2.2、React-SSR 客户端二次渲染原理
1. 客户端二次渲染：ReactDOM.hydrate
- render渲染的时候不会复用原本存在的节点？
- hydrate渲染的时候会复用原本存在的节点！

2. 客户端路由配置；【参考示例代码】
3. 客户端Redux状态；【参考示例代码】
4. 客户端回填服务端数据；

![输入图片说明](https://images.gitee.com/uploads/images/2021/0807/120732_dd67c5ed_9130428.png "屏幕截图.png")