React服务端渲染&同构

React服务端渲染

背景

• 第一阶段

很久以前, 一个网站的开发还是前端和服务端在一个项目来维护, 可能是用php+jquery.
那时候的页面渲染是放在服务端的, 也就是用户访问一个页面a的时候, 会直接访问服务端路由, 由服务端来渲染页面然后返回给浏览器。

也就是说网页的所有内容都会一次性被写在html里, 一起送给浏览器。
这时候你右键点击查看网页源代码, 可以看到所有的代码; 或者你去查看html请求, 查看"预览", 会发现他就是一个完整的网页。

• 第二阶段

但是慢慢的人们觉得上面这种方式前后端协同太麻烦, 耦合太严重, 严重影响开发效率和体验。
于是随着vue/react的横空出世, 人们开始习惯了纯客户端渲染的spa.

这时候的html中只会写入一些主脚本文件, 没有什么实质性的内容. 等到html在浏览器端解析后, 执行js文件, 才逐步把元素创建在dom上。
所以你去查看网页源代码的时候, 发现根本没什么内容, 只有各种脚本的链接。

• 第三阶段

后来人们又慢慢的觉得, 纯spa对SEO非常不友好, 并且白屏时间很长。
对于一些活动页, 白屏时间长代表了什么? 代表了用户根本没有耐心去等待页面加载完成.

所以人们又想回到服务端渲染, 提高SEO的效果, 尽量缩短白屏时间.

那难道我们又要回到阶段一那种人神共愤的开发模式吗? 不, 我们现在有了新的方案, 新的模式, 叫做同构。

所谓的同构理解为：同种结构的不同表现形态, 同一份react代码, 分别在两端各执行一遍。

创建一个服务端渲染应用

1. renderToString
   首先来看看他是个什么东西
   
   它可以渲染一个react元素/组件到页面中，而且只能用到服务端
   所以spa react-dom -> render 相对应的就是spa react-dom/server -> renderToString
2. 整一个Hello World

//MyServer.js
const {
    renderToString } = require('react-dom/server');
const React = require('react');
const express = require('express');//commonJS方式引入

var app = express();
const PORT = 3000;

const App = class extends React.PureComponent {
   
    render(){
   
        return React.createElement('h1',null,'Hello World!');
    }
}

app.get('/',function(req,res){
   
    const content = renderToString(React.createElement(App));//渲染成HTML
    res.send(content);//返回结果
})

app.listen(PORT,() => {
   
    console.log(`server is listening on ${
     PORT}`);
})

启动服务端之后，手动网页访问本地对应的端口

可以看到，返回的就是hello world，这就是一个服务端应用！

3. webpack配置
   应用写好之后，需要浏览器端的webpack配置

const path = require('path');
const nodeExternals = require('webpack-node-externals');//打包的时候不打包node_modules
const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
   
  entry:{
   
    index:path.resolve(__dirname,'../server.js')
  },
  mode:'development',
  target:'node',//不将node自带的诸如path、fs这类的包打进去,一定要是node
  devtool: 'cheap-module-eval-source-map',//source-map配置相关，这块可以理解为提供更快的打包性能
  output:{
   
    filename:'[name].js',
    path:path.resolve(__dirname,'../dist/server')//常用输出路径
  },
  externals:[nodeExternals()], //不将node_modules里面的包打进去 
  resolve:{
   
    alias:{
   
      '@':path.resolve(__dirname,'../src')
    },
    extensions:['.js']
  },
  module:{
   //babel转化配置
    rules:[{
   
      test:/\.js$/,
      use:'babel-loader',
      exclude:/node_modules/
    }]
  },
  plugins: [//一般应用都会有的public目录，直接拷贝到dist目录下
    new CopyWebpackPlugin([{
   
      from:path.resolve(__dirname,'../public'),
      to:path.resolve(__dirname,'../dist')
    }])
  ]
}

cli用习惯了，写配置有点折磨，写好之后要怎么去使用呢？package.json配置运行脚本：

"scripts": {
   
    "build:server": "webpack --config build/webpack-server.config.js --watch",
    "server": "nodemon dist/server/index.js"
  }

那么，先打个包

可以看到，已经打包出来了一大堆看不懂的东西
这个时候，运行起来即可
到现在写了这么多配置，其实只是为了让服务端支持一下浏览器端基本的运行配置/环境

4. 给h1标签绑定一个click事件

import React from 'react';
import {
   renderToString} from 'react-dom/server';

const express = require('express');
const app