React的服务端渲染是建立在虚拟DOM上的服务器端渲染，而且服务端渲染会让页面的首屏渲染速度大大加快。不过服务端渲染也有弊端，客户端渲染React代码在浏览器端执行，他消耗的是用户浏览器端的性能，但是服务器端渲染消耗的是服务器端的性能，因为React代码在服务器上运行。极大的消耗了服务器的性能，因为React代码是很消耗计算性能的。
如果你的项目完全没有必要使用SEO优化并且你的项目访问速度已经很快了的情况下，建议还是不要使用SSR的技术了，因为他的成本开销还是比较大的。
上面我们的代码每次修改之后都需要重新执行webpack打包和启动服务器，这样调试起来太过麻烦，为了解决这个问题我们需要做一下webpack的自动打包和node的重启。我们在package.json中加入build命令，并且通过--watch监听文件变化进行自动打包。
{ ... "scripts": { "build": "webpack --config webpack.server.js --watch" } ... }
只是重新打包还不够，我们还需要重启node服务器，这里我们需要借助nodemon模块，这里我们使用全局安装nodemon, 在package.json文件中添加一个start命令来启动我们的node服务器。使用nodemon监听build文件并且发生改变之后重新exec运行"node ./build/bundile.js", 这里需要保留双引号，转译一下就好了。
{ ... "scripts": { "start": "nodemon --watch build --exec node \"./build/bundile.js\"", "build": "webpack --config webpack.server.js --watch" } ... }
这时我们启动服务器，这里需要在两个窗口运行下面的命令，因为build后不允许再输入其他命令了。
npm run build npm run start
这个时候我们修改代码之后页面就会自动更新了。
但是上面的流程还是有些麻烦，我们需要两个窗口来执行命令，我们想要一个窗口将两个命令执行完毕，我们需要借助一个第三方模块npm-run-all，可以全局安装这个模块。然后再package.json中来修改一下。
我们在打包和调试应该是在开发环境，我们创建一个dev命令, 里面执行npm-run-all, --parallel表示并行执行, 执行dev:开头的所有命令。我们将start和build前面追加一个dev:，这个时候我想启动服务器同时监听文件改变运行npm run dev就可以了。
{ ... "scripts": { "dev": "npm-run-all --parallel dev:**", "dev:start": "nodemon --watch build --exec node \"./build/bundile.js\"", "dev:build": "webpack --config webpack.server.js --watch" } ... }
什么叫做同构比如下面的代码，我们给div绑定一个click事件，希望点击的时候可以弹出click提示。但是运行之后我们会发现这个事件并没有被绑定上，因为服务器端没办法绑定事件。
src/components/Home/index.js
import React from 'react'; const Home = () => { return <div onClick={() => { alert('click'); }}>home</div> } export default Home;
一般我们的做法是先将页面渲染出来，然后将相同的代码在浏览器端像传统的React项目一样再去运行一遍，这样的话这个点击事件就有了。
这就衍生出一个同构的概念，我的理解是一套React代码在服务器端执行一次，在客户端再执行一次。
同构就可以解决点击事件无效的问题，首先服务器端执行一次能够正常的展示页面，客户端再执行一次就可以绑定上事件。
我们可以在页面渲染的时候加载一个index.js, 使用app.use创建静态文件的访问路径, 这样访问的index.js就会请求到/public/index.js文件中。
app.use(express.static('public')); app.get('https://www.jb51.net/', function(req, res) { res.send(` <html> <body> <div>${content}</div> <script src="https://www.jb51.net/index.js"></script> </body> </html> `); })
public/index.js
console.log('public');
基于这种情况我们就可以将React代码在浏览器中执行一次，我们这里新建一个/src/client/index.js。将客户端执行的代码帖进去。这里我们同构代码使用hydrate代替render。
import React from 'react'; import ReactDOM from 'react-dom'; import Home from '../Components/Home'; ReactDOM.hydrate(<Home />, document.getElementById('root'));
然后我们还需要在根目录创建一个webpack.client.js文件。入口文件为./src/client/index.js，出口文件到public/index.js