React+Ts+Node简单实现服务端渲染-1

代码地址：https://github.com/ZhangDengchuan/react-ts-ssr
有兴趣的小伙伴可以加Q群 879108483 互相学习
话不多说，直接开搞

准备项目 - 傻瓜工具人模式开启

// 初始化react+ts项目
yarn create react-app antd-demo-ts --template typescript
或者 
npx create-react-app antd-demo-ts --typescript

安装必要组件

yarn add express @types/express ts-node asset-require-hook --dev

在刚刚初始化的根目录新建 ssr/server.tsx，然后cd到ssr中初始化tsconfig

cd ssr
tsc --init // 这里需要安装typescript 如果提示tsc未知命令 请先行 npm install typescript -g

为了在server.tsx里面解析jsx，需要在初始化中的tsconfig.json取消注释掉 "jsx": "preserve", ,并且改成 "jsx": "react",再手动添加一行"resolveJsonModule":true,

{
  "compilerOptions": {
     ......
    // "checkJs": true,  
    // 就是这一行                     
    "jsx": "react", 
    // 还有添加这一行，为了之后导入json
    "resolveJsonModule":true,                  
    // "declaration": true,                   
    // "declarationMap": true,       
    ......

在ssr/server.tsx里面写上

import React from "react";
import express from "express";
import ReactDOMServer from "react-dom/server";

const app = express();

app.get("*", (req, res) => {
  res.send(ReactDOMServer.renderToString(<div>123123</div>));
});

app.listen(8081);

这里还是讲解一下实现的大概的原理，react-dom为我们提供了一个解析react的组件ReactDOMServer，内置renderToString方法接收一个ReactElement然后解析成为字符串之后通过express send到浏览器，此时爬虫就能获取到真实的文本。

启动ssr

cd ssr 
ts-node server.tsx

然后访问http://localhost:8081/就能看到浏览器输出的123123，这里是我们能看到的。继续鼠标右键=>查看网页源代码，就可以看到真实的<div data-reactroot="">123123</div>，这里就是蜘蛛能抓到的。

如何配合react？
这里我们就要在ReactDOMServer.renderToString中渲染我们写的react组件了，修改一下ssr/server.tsx

import React from "react";
import express from "express";
import ReactDOMServer from "react-dom/server";
/// 添加这儿
import AppComponent from "../src/App";

const app = express();

app.get("*", (req, res) => {
  /// 修改这儿
  res.send(ReactDOMServer.renderToString(<AppComponent />));
});

app.listen(8081);

然后通过上面的命令重新启动ssr
??抛了一个异常⨯ Unable to compile TypeScript:, 这是因为node服务端无法处理svg、css这些文件，这就要用到第二步安装的asset-require-hook，这个组件能帮助node过滤掉不支持的导入。
再在ssr/server.tsx添加两行

...
// 按需写入文件后缀 这个需要在react组件倒入前导入
require("asset-require-hook")({
    extensions: ["svg", "css", "less", "jpg", "png", "gif"],
});
// eslint-disable-next-line import/first
import AppComponent from "../src/App";
...

还有一个注意的是图片导入方式不能用import，需要把./src/App.tsx的import logo from './logo.svg';改成const logo = require("./logo.svg");
改完之后再次重新启动ssr，然后刷新http://localhost:8081/，就可以看到简单版的create-react-app初始化的界面了，当然，再次查看网页源代码也发现蜘蛛能抓取到我们写的代码。
此时大家又要问。就这么丑？这能用？别急，还有步骤，就需要react打包之后来支持了。

打包APP

// 退回根目录执行 
npm run build

然后看build文件夹下，有一个asset-manifest.json文件，里面可以找到打包之后的各种目录，先把./build/index.html的代码拷贝下来，写到server.tsx里面

import React from "react";
import express from "express";
import ReactDOMServer from "react-dom/server";
// 按需写入文件后缀
require("asset-require-hook")({
  extensions: ["svg", "css", "less", "jpg", "png", "gif"],
});
// eslint-disable-next-line import/first
import AppComponent from "../src/App";

const app = express();

// 托管静态文件  
app.use("/assets", express.static("../build"));
app.use("/static/media", express.static("../build/static/media"));

app.get("*", (req, res) => {
 // ************ 这里
  const _html = `<!doctype html>
  <html lang="en">
  
  <head>
      <meta charset="utf-8" />
      <link rel="icon" href="/favicon.ico" />
      <meta name="viewport" content="width=device-width,initial-scale=1" />
      <meta name="theme-color" content="#000000" />
      <meta name="description" content="Web site created using create-react-app" />
      <link rel="apple-touch-icon" href="/logo192.png" />
      <link rel="manifest" href="/manifest.json" />
      <title>React App</title>
      <link href="./static/css/main.5f361e03.chunk.css" rel="stylesheet">
  </head>
  
  <body><noscript>You need to enable JavaScript to run this app.</noscript>
      <div id="root"></div>
      <script>!function (e) { function r(r) { for (var n, l, a = r[0], f = r[1], i = r[2], p = 0, s = []; p < a.length; p++)l = a[p], Object.prototype.hasOwnProperty.call(o, l) && o[l] && s.push(o[l][0]), o[l] = 0; for (n in f) Object.prototype.hasOwnProperty.call(f, n) && (e[n] = f[n]); for (c && c(r); s.length;)s.shift()(); return u.push.apply(u, i || []), t() } function t() { for (var e, r = 0; r < u.length; r++) { for (var t = u[r], n = !0, a = 1; a < t.length; a++) { var f = t[a]; 0 !== o[f] && (n = !1) } n && (u.splice(r--, 1), e = l(l.s = t[0])) } return e } var n = {}, o = { 1: 0 }, u = []; function l(r) { if (n[r]) return n[r].exports; var t = n[r] = { i: r, l: !1, exports: {} }; return e[r].call(t.exports, t, t.exports, l), t.l = !0, t.exports } l.m = e, l.c = n, l.d = function (e, r, t) { l.o(e, r) || Object.defineProperty(e, r, { enumerable: !0, get: t }) }, l.r = function (e) { "undefined" != typeof Symbol && Symbol.toStringTag && Object.defineProperty(e, Symbol.toStringTag, { value: "Module" }), Object.defineProperty(e, "__esModule", { value: !0 }) }, l.t = function (e, r) { if (1 & r && (e = l(e)), 8 & r) return e; if (4 & r && "object" == typeof e && e && e.__esModule) return e; var t = Object.create(null); if (l.r(t), Object.defineProperty(t, "default", { enumerable: !0, value: e }), 2 & r && "string" != typeof e) for (var n in e) l.d(t, n, function (r) { return e[r] }.bind(null, n)); return t }, l.n = function (e) { var r = e && e.__esModule ? function () { return e.default } : function () { return e }; return l.d(r, "a", r), r }, l.o = function (e, r) { return Object.prototype.hasOwnProperty.call(e, r) }, l.p = "/"; var a = this["webpackJsonpreact-ts-ssr"] = this["webpackJsonpreact-ts-ssr"] || [], f = a.push.bind(a); a.push = r, a = a.slice(); for (var i = 0; i < a.length; i++)r(a[i]); var c = f; t() }([])</script>
      <script src="./static/js/2.cd2ce6f0.chunk.js"></script>
      <script src="./static/js/main.9006c2b6.chunk.js"></script>
  </body>
  
  </html>`;
  res.send(ReactDOMServer.renderToString(<AppComponent />));
});

app.listen(8081);

然后再处理一下导入的css和js的路径，先导入build/asset-manifest.json

....
import assetsMainfest from '../build/asset-manifest.json';
....
const _html = `<!doctype html>
  <html lang="en">
  
  <head>
      <meta charset="utf-8" />
      <!-- 这儿 -->
      <link rel="icon" href="http://localhost:8081/assets/favicon.ico" />
      <meta name="viewport" content="width=device-width,initial-scale=1" />
      <meta name="theme-color" content="#000000" />
      <meta name="description" content="Web site created using create-react-app" />
      <!-- 这儿 -->
      <link rel="apple-touch-icon" href="http://localhost:8081/assets/logo192.png" />
      <!-- 这儿 -->
      <link rel="manifest" href="http://localhost:8081/assets/manifest.json" />
      <title>React App</title>
      <!-- 这儿 -->
      <link href="http://localhost:8081/assets/${assetsMainfest.files["main.css"]}" rel="stylesheet">
  </head>
  
  <body><noscript>You need to enable JavaScript to run this app.</noscript>
      <div id="root">
      <!-- 这儿 -->
        ${ReactDOMServer.renderToString(<AppComponent />)}
      </div>
      <script>!function (e) { function r(r) { for (var n, l, a = r[0], f = r[1], i = r[2], p = 0, s = []; p < a.length; p++)l = a[p], Object.prototype.hasOwnProperty.call(o, l) && o[l] && s.push(o[l][0]), o[l] = 0; for (n in f) Object.prototype.hasOwnProperty.call(f, n) && (e[n] = f[n]); for (c && c(r); s.length;)s.shift()(); return u.push.apply(u, i || []), t() } function t() { for (var e, r = 0; r < u.length; r++) { for (var t = u[r], n = !0, a = 1; a < t.length; a++) { var f = t[a]; 0 !== o[f] && (n = !1) } n && (u.splice(r--, 1), e = l(l.s = t[0])) } return e } var n = {}, o = { 1: 0 }, u = []; function l(r) { if (n[r]) return n[r].exports; var t = n[r] = { i: r, l: !1, exports: {} }; return e[r].call(t.exports, t, t.exports, l), t.l = !0, t.exports } l.m = e, l.c = n, l.d = function (e, r, t) { l.o(e, r) || Object.defineProperty(e, r, { enumerable: !0, get: t }) }, l.r = function (e) { "undefined" != typeof Symbol && Symbol.toStringTag && Object.defineProperty(e, Symbol.toStringTag, { value: "Module" }), Object.defineProperty(e, "__esModule", { value: !0 }) }, l.t = function (e, r) { if (1 & r && (e = l(e)), 8 & r) return e; if (4 & r && "object" == typeof e && e && e.__esModule) return e; var t = Object.create(null); if (l.r(t), Object.defineProperty(t, "default", { enumerable: !0, value: e }), 2 & r && "string" != typeof e) for (var n in e) l.d(t, n, function (r) { return e[r] }.bind(null, n)); return t }, l.n = function (e) { var r = e && e.__esModule ? function () { return e.default } : function () { return e }; return l.d(r, "a", r), r }, l.o = function (e, r) { return Object.prototype.hasOwnProperty.call(e, r) }, l.p = "/"; var a = this["webpackJsonpreact-ts-ssr"] = this["webpackJsonpreact-ts-ssr"] || [], f = a.push.bind(a); a.push = r, a = a.slice(); for (var i = 0; i < a.length; i++)r(a[i]); var c = f; t() }([])</script>
      <!-- 这儿 -->
      <script src="http://localhost:8081/assets/${assetsMainfest.files["static/js/2.cd2ce6f0.chunk.js"]}"></script>
      <!-- 这儿 -->
      <script src="http://localhost:8081/assets/${assetsMainfest.files["main.js"]}"></script>
  </body>
  
  </html>`;
  /// 修改这儿
  res.send(_html);
....

好啦，服务端渲染出来的html架子是有了，重新启动ssr 可以看到这个界面，

WX20200601-140903@2x.png

大功告成

其实这个是一个简单的实现版本，还很不完善，比如通过条件渲染出来的html还是依然无法渲染，比如请求接口这些异步操作。接下来的实现就留给接下来的文章吧。