基於Koa與umi實現服務端（SSR）渲染

工具：

umijs：react前端應用框架。

koa：基於 Node.js 平台的web 開發框架。

介紹：

本文主要是簡單介紹，利用umi開發前端頁面，打包成服務端渲染工程包。由Koa實現服務端渲染處理。

過程：

前端部分：

1.正常構建umi工程包。開發web應用。

2.開始ssr配置。

　　

export default defineConfig({
  ...others,
  ssr: {}, // 開啟ssr
  base: '/base/', // root
  publicPath: '/base/', // root
});

3.build命令打包后，會在工程目錄下dist包中產生umi.server.js文件。該文件作為服務端渲染的入口。

服務端部分：

1.構建Koa工程。

2.監聽端口，處理請求。代碼源於umi官方示例。

　　

const Koa = require("koa");
const compress = require("koa-compress");
const mount = require("koa-mount");
const { join, extname } = require("path");
const { staticPath } = require("./conf/webConf");
const root = join(__dirname, staticPath);

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) => {
  const ext = extname(ctx.request.path);
  // 符合要求的路由才進行服務端渲染，否則走靜態文件邏輯
  if (!ext) {
    if (!render) {
      render = require(`${staticPath}/umi.server`); // 上文中生產的umi.server.js 入口文件的位置
    }
    // 這里默認是字符串渲染
    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();
  }
});

app.use(mount("/base", require("koa-static")(root))); // 靜態資源位置 注意此處，要與訪問的url相匹配，比如現在配置的，
   就是以/base開頭的靜態資源重定向到 root指代到目錄

app.listen(7001); // 服務監聽端口
module.exports = app.callback();

結束：

訪問localhost:7001端口，即可訪問由服務端渲染的頁面了。