基于Koa与umi实现服务端（SSR）渲染

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

工具：

umijs：react前端应用框架。

koa：基于 Node.js 平台的web 开发框架。

介绍：

本文主要是简单介绍，利用umi开发前端页面，打包成服务端渲染工程包。由Koa实现服务端渲染处理。

过程：

前端部分：

1.正常构建umi工程包。开发web应用。

2.开始ssr配置。

1 export default defineConfig({
2 ...others,
3 ssr: {}, // 开启ssr
4 base: '/base/', // root
5 publicPath: '/base/', // root
6 });

3.build命令打包后，会在工程目录下dist包中产生umi.server.js文件。该文件作为服务端渲染的入口。

服务端部分：

1.构建Koa工程。

2.监听端口，处理请求。代码源于umi官方示例。

1 const Koa = require("koa");
2 const compress = require("koa-compress");
3 const mount = require("koa-mount");
4 const { join, extname } = require("path");
5 const { staticPath } = require("./conf/webConf");
6 const root = join(__dirname, staticPath);
7
8 const app = new Koa();
9 app.use(
10 compress({
11 threshold: 2048,
12 gzip: {
13 flush: require("zlib").constants.Z_SYNC_FLUSH,
14 },
15 deflate: {
16 flush: require("zlib").constants.Z_SYNC_FLUSH,
17 },
18 br: false, // 禁用br解决https gzip不生效加载缓慢问题
19 })
20 );
21
22 let render;
23 app.use(async (ctx, next) => {
24 const ext = extname(ctx.request.path);
25 // 符合要求的路由才进行服务端渲染，否则走静态文件逻辑
26 if (!ext) {
27 if (!render) {
28 render = require(`${staticPath}/umi.server`); // 上文中生产的umi.server.js 入口文件的位置
29 }
30 // 这里默认是字符串渲染
31 ctx.type = "text/html";
32 ctx.status = 200;
33 const { html, error } = await render({
34 path: ctx.request.url,
35 });
36 if (error) {
37 console.log("----------------服务端报错-------------------", error);
38 ctx.throw(500, error);
39 }
40 ctx.body = html;
41 } else {
42 await next();
43 }
44 });
45
46 app.use(mount("/base", require("koa-static")(root))); // 静态资源位置注意此处，要与访问的url相匹配，比如现在配置的，
就是以/base开头的静态资源重定向到 root指代到目录
47
48 app.listen(7001); // 服务监听端口
49 module.exports = app.callback();