基于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();

结束：

访问localhost:7001端口，即可访问由服务端渲染的页面了。