# morender

**Repository Path**: mnt-ltd/morender

## Basic Information

- **Project Name**: morender
- **Description**: morender = more render，魔豆文库SSR SEO过渡方案，同样也适用于其他CSR项目。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-04-26
- **Last Updated**: 2025-08-08

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 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

# 安装chrome浏览器
# npx puppeteer browsers install chrome
```

### 6. 启动SSR服务

> 建议使用方式2启动

#### 启动方式1：

```
node main.js
```

#### 启动方式2：

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

```
pm2 start daemon.json
```

#### 启动方式3：

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


### 7. 魔豆文库后台配置

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

![](assets/ssr.png)

### 8. 验证SSR效果

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