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

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

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

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

2. 安装必要组件

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

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

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

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

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

5. 在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(
123123
));
});

app.listen(8081);

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

6. 启动ssr

cd ssr 
ts-node server.tsx

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

123123

，这里就是蜘蛛能抓到的。

7. 如何配合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());
});

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打包之后来支持了。

8. 打包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 = `
  
  
  
      
      
      
      
      
      
      
      
      
  
  
  
      

      
      
      
  
  
  `;
  res.send(ReactDOMServer.renderToString());
});

app.listen(8081);

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

....
import assetsMainfest from '../build/asset-manifest.json';
....
const _html = `
  
  
  
      
      
      
      
      
      
      
      
      
      
      
      
      
  
  
  
      

      
        ${ReactDOMServer.renderToString()}
      
      
      
      
      
      
  
  
  `;
  /// 修改这儿
  res.send(_html);
....

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

[email protected]

大功告成

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