morender

morender = more + render

针对魔豆文库当前阶段nuxt2 CSR的SEO过渡方案。本方案比较简单粗暴，只处理GET请求，暂时不建议用于提供用户的直接访问，更多优化有待后续处理。

目前短时间内没法开发出魔豆文库基于nuxt3的前端SSR方案，又鉴于当前不少客户对SEO的强烈要求，因此开发了当前的 morender。

魔豆文库为什么采用nuxt2开发 CSR 的前端？原因是：

1. 我们规划魔豆文库产品的时候，Vue3正式版刚发布没多久，彼此Nuxt3还没出来。
2. CSR方案，客户在部署的时候，不需要安装node以及编译前端，以节省部署工作。

实现以及性能

借助于puppeteer的headless chromium，每次渲染，只渲染网页内容，对网页请求的静态资源不做渲染，直接转发到源链接。

具体实现，见main.js，代码比较少。

关于性能，大概1~2秒左右能渲染一个页面，如果再结合魔豆文库的缓存，对于搜索引擎爬虫的相应还是很快的。

安装部署

1. 安装node和npm

教程略，请自行百度或谷歌，如果还是解决不了，建议放弃。

2. 安装依赖CNPM

之所以安装CNPM，原因是CNPM安装puppeteer依赖比直接用npm安装成功的概率高。至少我在M1的mac上，npm没安装成功过。

• Linux/Unix/Mac

sudo npm install -g cnpm --registry=https://registry.npmmirror.com

• Windows

请在有超级管理员权限的cmd或powershell中运行

npm install -g cnpm --registry=https://registry.npmmirror.com

3. 克隆或下载解压当前项目放到服务器相应路径

如使用 Git Clone 的方式：

git clone https://gitee.com/mnt-ltd/morender.git

4. 修改配置

将 config.example.js 重命名为 config.js，然后按提示修改配置：

const config = {
  // 服务监听端口
  port: 6060,

  // puppeteer超时时间，单位ms，默认10s
  timeout: 10000,

  // 魔豆文库地址，用于拼接请求地址，建议用内网地址
  addr: "http://127.0.0.1:8880",

  // 缓存过期时间。0表示不缓存，单位ms。不建议设置缓存，直接在魔豆文库后台设置即可
  expire: 0,

  // 是否启用压缩，不建议启用。大概耗时100ms左右
  compress: false,
};

module.exports = config;

5. 安装程序依赖

cnpm install

6. 启动SSR服务

建议使用方式2启动

启动方式1：

node main.js

启动方式2：

pm2的开机启动设置，请自行百度或谷歌。Windows和Linux的方式各不相同

pm2 start daemon.json

启动方式3：

在魔豆文库 后台->系统设置->SSR配置 进行设置

7. 魔豆文库后台配置

进入魔豆文库管理后台，在 系统设置 -> SSR配置 处进行配置。

8. 验证SSR效果

打开爱站搜索引擎爬虫模拟抓取页面 https://tools.aizhan.com/rb/ ，粘贴您网站的链接，如果能摘取到文本，则说明配置成功。