如何在NuxtJS+Firestore站点配置Rendertron实现SEO？

我明白你不想直接改动Nuxt官方不建议修改的server.js文件，下面是完全符合Nuxt最佳实践的方案，利用Nuxt内置的serverMiddleware来实现Rendertron的集成：

步骤1：安装依赖 #

首先在项目根目录安装Rendertron中间件：

npm install rendertron-middleware --save
# 或者用yarn
yarn add rendertron-middleware

步骤2：创建自定义服务器中间件 #

在项目根目录新建一个server-middleware文件夹，然后在里面创建rendertron.js文件，写入以下代码：

const rendertron = require('rendertron-middleware');

// 合并默认爬虫UA列表，额外添加googlebot
const BOTS = rendertron.botUserAgents.concat('googlebot');
const BOT_UA_PATTERN = new RegExp(BOTS.join('|'), 'i');

// 导出Rendertron中间件配置
module.exports = rendertron.makeMiddleware({
  proxyUrl: 'https://render-tron.appspot.com/render',
  userAgentPattern: BOT_UA_PATTERN
});

步骤3：在Nuxt配置中注册中间件 #

打开nuxt.config.js，找到serverMiddleware配置项（如果没有就新增），把刚才创建的中间件路径加进去：

export default {
  // ...你的其他Nuxt配置
  serverMiddleware: [
    './server-middleware/rendertron.js'
  ]
}

为什么这个方案可行？ #

Nuxt的serverMiddleware会自动挂载到它的内置服务器上，不需要修改核心的server.js文件，完全遵循官方的推荐规范。当爬虫（匹配你定义的UA规则）访问你的站点时，请求会自动转发到Rendertron服务，渲染出完整的页面内容再返回给爬虫，解决SPA/SSR站点的SEO问题。

额外注意事项 #

• 确保你的Rendertron服务（这里用的是官方的https://render-tron.appspot.com/）是正常可用的，如果是你自己部署的实例，记得替换成对应的地址
• 你可以根据需求调整BOTS数组，添加或移除需要处理的爬虫UA
• 如果你的Nuxt站点是静态生成模式（static mode），这个方案不适用，因为静态站点没有运行中的服务器，此时需要在CDN层面配置动态渲染规则

内容的提问来源于stack exchange，提问作者Daryl Wong