react&node - 服务端渲染(server-render&hydrate) 上

前言

本文章须要对react和koa而且webpack有必定的基础

相信你们对react或者是vue来讲用的更多的是后台管理或者是app之类的，这些应用每每直接一个cli就能够搞定了 既然这样，为何官方还要出一个服务端渲染的支持呢？闲的没事 固然不是，由于像某些面对用户的web端，一般都要考虑一个东西，也就是seo 若是直接cli create的项目你们确定也都看过那个网站源代码、空空如也，什么都看不到，中国的大多数搜索引擎（好比百度）是不会看js的，因此这确定知足不了需求，可是服务端渲染一些经常使用的比方说ejs什么这简直就是原生、写起来既慢又不舒服、那你们都是怎么实现的呢？ 本文章就来讲说大厂目前服务端渲染的最优解决方案。

服务端渲染

在前端来讲其实听到这个词应该没有 混编 来的更多一点 为何须要服务端渲染：

1. 传统webpack-cli打包无法作seo
2. 首屏渲染优化能力有限
3. 无法作静态化（也就是访问频率搞的页面提早生成好，请求的时候能直接甩过去、优化性能）

方案

其实后端渲染方案仍是挺多的，拿react来讲，它其实有本身的解决方案好比：

1. next - 不成熟。
2. 这是个react官放推荐的，可是说实话、出来的结果比较让人失望
3. 自带很是多的东西、很不利于维护、并且很乱、并且对seo也没有特别的友好
4. 因此目前来讲还远远没有到能够在大项目中用的成熟度
5. 后台渲染
6. ejs ✅ 1. 其实后台渲染的成熟的东西很是多，我我的比较喜欢ejs，不过都差不太多 1. 我们的我们的例子最终也是用ejs来配合react-server-render最终来渲染

这些是服务器渲染 还有就是react 怎么和react-server-render渲染的这些东西怎么来整合 由于后端渲染出去的东西都是死的，包括什么事件都是没有的，这确定不行

存在的问题和难点预告

首先呢，你们都明白react有点特殊，用的不是js，而是jsx，而后平时的项目中你们也都是用webpack去编译jsx的 可是呢、又有一个问题 在node里写jsx语法都通不过、可是webpack又无法去编译node，由于node里有一些系统自带的模块源码根本打包不进来比方说 fs、http之类的 因此呢，我们采用的方案很简单、给react那一套单独配上jsx 至于服务的那一块，根本不用想，各类系统包包括什么多进程等等的webpack是打包不了的， 可是至于怎么配合这个就是本篇文章说的重点

---

react如何用于后台渲染

建立项目

相似这样 而后终端 cd ./react-server-render  而后执行 yarn init -y  或者 cnpm init -y 

下载依赖

yarn add koa react react-dom webpack 

文件建立

首先先建一个1.jsx放在 components目录下 像这样 而后随便写一个react组件

import React from 'react';

export default class App extends React.Component {
  render(){
    return (<div>app</div>)
  }
}
复制代码

而后在根目录建一个server.js

const Koa = require('koa');
const ReactDOMServer = require('react-dom/server')

let app = new Koa();

app.use(ctx=>{
	ctx.body = ???
})

app.listen(9000)
复制代码

 而后呢？按着我们正常的思路如今走一遍，首先须要一个服务器，而后能够先随便给一个use请求什么都返回这个就完了，注意这时候有问题了，要返回什么？ 直接nodejs里是不能直接引入jsx的会报错，我们能够先来试一下

从react官网能够看到

ReactDOMServer里有一个renderToString方法，能够把组件变成字符串，我们直接试一下

解决node中不能引入jsx问题

 server.js

const Koa = require('koa');
const ReactDOMServer = require('react-dom/server')
const Cp1 = require('./components/1');

let app = new Koa();

app.use(ctx=>{
  ctx.body = ReactDOMServer.renderToString(<Cp1 />)
})

app.listen(9000)
复制代码

这时候运行会直接爆炸💥 我们上文中讲过node中是不能直接写jsx语法的

引入webpack编译jsx

好的，既然这样，我们就用我们亲爱的webpack 安装依赖

yarn add babel-loader @babel/core @babel/preset-react
复制代码

新建一个webpack.config.js

const path=require('path');

module.exports={
  mode: 'development',
  entry: './libs/index',
  target: 'node',

  output: {
    libraryTarget: 'umd',
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.js'
  },
  module: {
    rules: [
      {test: /\.jsx$/, exclude: /node_modules/, use: {
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-react']
        }
      }}
    ]
  },
  resolve: {
    extensions: ['.js', '.jsx', '.ts', '.tsx'],
  }
};

复制代码

我们这个文章不是主要讲webpack的，直接贴代码了就 你们看webpack配置应该也看到了，里面的entry是 libs/index 没错，我们须要一个单独的目录来区分一下，哪些是react项目，哪些是node项目 而后再建一个 index.jsx放到libs下  /libs/index.tsx

const React=require('react');
const ReactDOMServer=require('react-dom/server');
const App=require('../components/1');

module.exports=function render(){
  return ReactDOMServer.renderToString(<App />);
}

复制代码

这个时候，咱们来编译一下

webpack
复制代码

就会看到这样的结果

而后改我们server.js

const Koa = require('koa');
const { render } = require('./dist/main');

let app = new Koa();

app.use(async ctx => {
  let str = render();

  ctx.body = str;
});

app.listen(8000);

复制代码

 /components/1.jsx

import React from 'react';

export default class App extends React.Component {
  constructor(props){
    super(props)
  }
  render(){
    return (<div>app</div>)
  }
}
复制代码

而后 webpack 一下 而后运行我们的server.js node server.js 而后访问 http://localhost:8000/ 就会看到我们想要的结果了

而且点击右键查看源码 能够看到真正的元素了，再也不是想以前cli建立的同样只有一个 <div id="app"></div> 了

总结

我们本篇文章已经说了react单纯配合koa作服务端渲染是什么样的感受了 不过还远远不够，原本我打算一篇文章写完的，结果发现东西有点多 我们目前还有不少不少的问题没说 好比如今只是单纯的渲染出来了、也都是好使的，

1. 那服务端koa给的数据应该怎么传到react里，
2. 包括服务端渲染这一块渲染出去的都是静态的，没有事件，那这个确定不行
3. 还有作了静态化的网站是怎么二次用react.hydrate进行二次渲染
4. 还有就是怎么配合ejs等等等等

看你们对这东西敢不敢兴趣了，感兴趣的话我能够接着再出react服务端渲染第二章

有什么感兴趣的，或者遇到什么问题能够直接加我好友，我们一块儿沟通

微信：Dyy916829411 qq: 916829411