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后
