UMI 服务端渲染

Umi 开启服务端渲染：

//.umirc.ts
export default {
  ssr: {},
  //...
}
或者
import { defineConfig } from 'umi';
export default defineConfig({
  ssr: {},
  //...
})

安装 koa、koa-compress、 koa-mount、koa-static、koa-websocket、koa2-proxy-middleware、nodemon、concurrently：

$ npm install koa koa-compress koa-mount koa-static  --save-dev
$ npm install koa-websocket koa2-proxy-middleware --save-dev
$ npm install nodemon --save-dev
$ npm install concurrently --save-dev

新建 server.js 文件：

$ touch server.js

添加代码到 server.js 文件：

const Koa = require('koa');
const compress = require('koa-compress');
const mount = require('koa-mount');
const { join, extname } = require('path');
const { parseCookie, parseNavLang } = require('./serverHelper');

const root = join(__dirname, 'dist');
const app = new Koa();
app.use(
  compress({
    threshold: 2048,
    gzip: {
      flush: require('zlib').constants.Z_SYNC_FLUSH,
    },
    deflate: {
      flush: require('zlib').constants.Z_SYNC_FLUSH,
    },
    br: false, // 禁用br解决https gzip不生效加载缓慢问题
  }),
);
let render;
app.use(async (ctx, next) => {
  /**
   *  扩展global对象
   *
   *  这里是在服务端处理好cookie，
   *  会把所有cookie处理成{}形式
   *  赋值到global上面，方便客户端使用
   *
   *  同时获取浏览器的默认语言，处理好
   */
  global._cookies = parseCookie(ctx);
  global._navigatorLang = parseNavLang(ctx);

  const ext = extname(ctx.request.path);
  // 符合要求的路由才进行服务端渲染，否则走静态文件逻辑
  if (!ext) {
    if (!render) {
      render = require('./dist/umi.server');
    }
    // 这里默认是字符串渲染
    ctx.type = 'text/html';
    ctx.status = 200;
    const { html, error } = await render({
      path: ctx.request.url,
    });
    if (error) {
      console.log('----------------服务端报错-------------------', error);
      ctx.throw(500, error);
    }
    ctx.body = html;
  } else {
    await next();
  }
});

/**
 *  注意这里的静态目录设置，需要和umi打包出来的目录是同一个
 *  这里最好是用nginx配置静态目录，如果是用cdn方式部署，这里可以忽略
 *
 */
app.use(mount('/dist', require('koa-static')(root)));

app.listen(7001);
console.log('http://localhost:7001');

module.exports = app.callback();

新建 serverHelper.js 文件，添加如下代码到 serverHelper.js 中：

const parseCookie = (ctx) => {
    let cookies = ctx.get('cookie');
    if (!cookies) {
      return {};
    }
    cookies = cookies.split(';');
    const res = {};
    for (const item of cookies) {
      const kv = item.split('=');
      if (kv && kv.length > 0) {
        res[kv[0].trim()] = decodeURIComponent(kv[1]);
      }
    }
    return res;
  };
  
  const parseNavLang = (ctx) => {
    // 服务端无法获取navigator.language，所以只能通过Accept-Language来判断浏览器语言。
    let navigatorLang;
    const clientLang = ctx.get('Accept-Language');
    if (clientLang.startsWith('zh')) {
      navigatorLang = 'zh-CN';
    } else if (clientLang.startsWith('en')) {
      navigatorLang = 'en-US';
    }
    return navigatorLang;
  };
  
  module.exports = {
    parseCookie,
    parseNavLang,
  };
  

修改 package.json 文件：

//dev 配置的 NODE_ENV 为测试环境，prod 配置的 NODE_ENV 为生产环境
{
  "scripts": {
      "build": "cross-env umi build",
      "dev": "cross-env UMI_UI=none NODE_ENV=development concurrently \"umi dev\" \"nodemon server.js\"",
       "prod": "cross-env UMI_UI=none NODE_ENV=production concurrently \"umi dev\" \"nodemon server.js\"",
  }
}

在项目根目录打开终端运行：

$ npm run build
$ npm run dev //运行测试环境，生产环境可执行 npm run prod

服务端无法使用 window、document、 navigator、localStorage、sessionStorage，所以需要进行改造：

//从 umi 中导出 isBrowser，判断环境是浏览器还是服务器 
import { isBrowser } from 'umi';
//通过 localStorage 存储的数据，在服务端使用 global 的属性获取
function getStorageData(key) {
   if (isBrowser()) {
        const data = localStorage.getItem(key);
        return JSON.parse(data);
   } else {
       return global[key]; 
   }
} 
//其它可根据项目业务自行修改；

cookie 在客户端使用 document.cookie Api，在服务端同样需要使用 global 的属性获取：

// src/utils/cookie.js
import { isBrowser } from 'umi';

const setCookie = (name, value, path, days) => {
   if(!isBrowser()) {
      global._cookies?.[name] = value;
      return; 
   }
   const Days = days || 30;
   const exp = new Date(); 
   exp.setTime(exp.getTime() + Days * 24 * 60 * 60 * 1000);
   if (path) {
    document.cookie = `${name}=${encodeURIComponent(
      value,
    )};path=${path};expires=${exp.toGMTString()}`;
  } else {
    document.cookie = `${name}=${encodeURIComponent(
      value,
    )};expires=${exp.toGMTString()}`;
  }
}

const getCookie = (name) => {
  let cookie;
  if (!isBrowser()) {
    // 这里需要在服务端处理好cookie，处理成{key:value}
    cookie = global._cookies?.[name] || null;
  } else {
    const reg = new RegExp(`(^| )${name}=([^;]*)(;|$)`);
    const arr = document.cookie.match(reg);
    if (arr) {
      cookie = decodeURIComponent(arr[2]);
    }
  }
  return cookie;
};

export { setCookie, getCookie };

业务：
一个路由对应一个页面，只有在当前页面组件上，可以设置 getInitialProps 初始化页面数据（非页面组件无法执行此方法）。
页面的数据预获取：

Home.getInitialProps = async ({ isServer, match, route, history }) => {
    const { data } = await queryList();
    return {
       list: data
    }  
}

注意：getInitialProps 有几个固定参数，match、route、history 都是与路由相关的数据，isServer 是判断是否在服务端执行此方法。关键是 getInitialProps 不仅可以在服务器端执行，同时在客户端环境下，例如路由跳转到此页面，同样执行此方法，因此无论是客户端渲染还是服务端渲染，统一了数据获取途径。
SSR前与SSR后对比：

SSR前

SSR后