- A+
所属分类：Web前端
工具：
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端口，即可访问由服务端渲染的页面了。
