SSR项目学习和使用

今天开会，同事突然说，我们的项目首屏渲染时间太久，引起客诉了。怎么办呢，需要把项目从客户端渲染转为服务端渲染，也就是SSR，大家一起想想研究一下怎么改才好。
我：啊？
于是，打开Google，郑重地打出了三个字母+三个汉字：什么是SSR
把学习笔记记录在这。

————————
最后我们使用了next框架改。

——————————

什么是SSR

先看：https://juejin.cn/post/6844904017487724557
讲的也很详细，带React样例（我的重点参考）：https://juejin.cn/post/6844903881390964744
Vue项目的SSR demo，但是里面有很多内容是共通的：https://github.com/yacan8/blog/issues/30
补充个，服务端渲染也是分不同渲染方式的：https://zhuanlan.zhihu.com/p/341229054
（像是官网等等数据不流通且不针对用户特殊处理的就可以使用SSG静态渲染）

如果要动手将一个单页面React应用转为SSR项目应该怎么做？

react ssr 服务端渲染入门
https://juejin.cn/post/6935621064517451812
https://cnodejs.org/topic/5b9ce0298f5b0c1c59ea0e5b

大佬们的demo大概是以下几个流程，我先以自己理解写点笔记，然后尝试着写一个简单demo出来。

1、传输静态页面。

使用ReactDOMServer.renderToString 或者ReactDOMServer.renderToNodeStream 方法，将写的JSX解析为html字符串。

2、同构。

什么是同构呢？因为服务端和客户端要获得相同的默认state数据，在初始化的时候，服务端获取了一遍数据，然后注入state，传入客户端，客户端就不用重新请求一遍了（还可能造成数据不统一），服务端和客户端的数据保持一致，就是同构。
同构和数据、js请求、路由都有关，所以我这认为同构是交互层面的。

因为我们项目原本就定了使用egg，所以我得在egg的基础上考虑SSR。
首先npm init egg --type=simple 创建一个空的egg项目。
参考
别人写好可使用的egg-react-ssr 脚手架。https://github.com/zhangyuang/egg-react-ssr
其他demo 参考：https://github.com/yjdjiayou/react-ssr-demo （从头创建）

1、node服务器返回静态HTML页面。
对Egg框架稍微了解一点之后，我需要把返回HTML的代码放在controller/home里。
也就是说，首先建立一个写react代码的文件夹（我建了page文件夹），然后再在node服务器里引用react页面代码，这样才能做到服务器解析html渲染。
然后，因为我们写的都是JSX片段（虚拟DOM），肯定是无法渲染的，第二步就是将它在node端转换为html代码返回给浏览器。

// 新建一个page文件夹， /page/index.jsimport React from 'react'export default function HTML(props){return <div><p>SSR</p><p>纯静态渲染</p>
</div>
}

const { renderToString } = require('react-dom/server');renderToString就是react中提供用于编译虚拟DOM的方法，它可以将react的虚拟dom转为真实的html节点。我们使用这个方法帮我们处理一下引入的页面。

// /app/controller/home.js'use strict';const Controller = require('egg').Controller;
import Home from '../../page/index';
import { renderToString } from 'react-dom/server';class HomeController extends Controller {async index() {const { ctx } = this;ctx.type = 'text/html'ctx.status = 200;const content = renderToString(<Home />);ctx.body = `<html><head><title>ssr</title></head><body><div id="root">${content}</div></body></html>`;}
}module.exports = HomeController;

看上去好像和资料参考里的一模一样，肯定没问题了！自信满满的我在这个项目终端里打下npm start！
嗯！不出意料，根本启不起来！是因为import无法解析，egg中暂时不支持esm，所以需要把引入方式改成cmd模式，但是egg项目中使用esm没关系，我们的page页面里用cmd根本不好写，所以思来想去，难不成还是得用babel?
查询了一些资料，不少项目都是将node端和客户端代码分别打包，虽然我还是挺懵的，但是搞不懂的话就写bug试一下吧。
于是自信满满（x)的我又在百度打下了几个字：怎么使用webpack babel

总之咱们的pages文件夹下肯定是用webpack编译一下了。
这部分的参考：https://blog.csdn.net/u012443286/article/details/79577545
webpack文件内容参考https://github.com/yjdjiayou/react-ssr-demo
npm i webpack babel-loader babel-core babel-preset-env -D
npm i @babel/core @babel/preset-env @babel/preset-react @babel/plugin-proposal-class-properties -D

新增三个文件

// /config/webpack.base.js'use strict';// const path = require('path');
module.exports = {mode: 'development',module: {rules: [{test: /\.js$/,loader: 'babel-loader',exclude: /node_modules/,options: {presets: ['@babel/preset-env','@babel/preset-react',],plugins: ['@babel/plugin-proposal-class-properties',],},},],},
};

// /config/webpack.client'use strict';const path = require('path');
const merge = require('webpack-merge');
const base = require('./webpack.base');module.exports = merge(base, {entry: './src/client/index.js',output: {path: path.resolve('public'),filename: 'client.js',},module: {rules: [{test: /\.css$/,use: ['style-loader',{loader: 'css-loader',options: {modules: true,},},],},],},
});

// config/webpack.server'use strict';const path = require('path');
const nodeExternal = require('webpack-node-externals');
const merge = require('webpack-merge');
const base = require('./webpack.base');module.exports = merge(base, {// 注意这个值target: 'node',entry: './src/server/index.js',output: {path: path.resolve('build'),filename: 'server.js',},externals: [ nodeExternal() ],module: {rules: [{test: /\.css$/,use: [// 服务端渲染不能用 style-loader，因为 node 没有 document 对象，无法插入 style 标签// 服务端本来就不能渲染 dom，只是提供 html/css/js 代码给浏览器，交给浏览器去渲染// 服务端返回的 html 源码里，没有 style 标签// 而在浏览器中的 html 源码里，有 style 标签，是通过 js 插入进去的'isomorphic-style-loader',{loader: 'css-loader',options: {modules: true,},},],},],},
});