关于 docsify ssr 的研究

docsify 虽然不错，但是不支持 seo 。
官网虽然提供 seo 的一个简单示例，但总总问题在 issues 中无人解答。

今天再次尝试，解决了 indexOf 和几个相关的报错，总算可以 ssr 起来了。

但是还有一个时有时无极不稳定的问题不知道怎么解决。

先把之前的研究记录一下，以免遗忘。

clone docsify 项目
node ./build/ssr.js 生成 packages/docsify-server-renderer/build.js 文件。
创建 t.js 文件，内容如下:

// t.js

// ## 方案1
// 1. 搜索引擎走 ssr
// 1. 浏览器走 history
// => 结果导致浏览器刷新时找不到路由， 老大爷来了 history 并不在服务器真实存在

// ## 方案2
// 1. 浏览器也走服务器的 ssr
// => 结果导致服务器负载高、渲染容易出错

const liveServer = require('live-server')
const isSSR = !!process.env.SSR
const middleware = []

if (true) {
  const Renderer = require('./packages/docsify-server-renderer/build.js')
  const renderer = new Renderer({
    template: `
  <!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>docsify</title>
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/lib/themes/vue.css" title="vue">
  </head>
  <body>
    <!--inject-app-->
    <!--inject-config-->
  <script src="https://unpkg.com/[email protected]/lib/docsify.min.js"></script>
  <script src="https://unpkg.com/[email protected]/lib/plugins/search.min.js"></script>
  </body>
  </html>`,
    config: {
      // routerMode: 'history', // 把用户端的路由也设置为 history 值以保持与收录的一致
      name: 'docsify',
      repo: 'docsifyjs/docsify',
      // basePath: 'https://docsify.js.org/', // 使用其他域名 正常
      // basePath: 'http://localhost:2233/', // 本地启动另一个 doc 服务器 404
      // basePath: 'docs', // 使用本地 doc 目录 404
      basePath: 'https://raw.githubusercontent.com/docsifyjs/docsify/develop/docs/', // 使用 github 正常
      // basePath: 'https://raw.githubusercontent.com/wll8/note/master/',
      loadNavbar: true,
      loadSidebar: true,
      subMaxLevel: 3,
      auto2top: true,
      path: './',
      alias: {
        '/de-de/changelog': '/changelog',
        '/zh-cn/changelog': '/changelog',
        '/changelog':
          'https://raw.githubusercontent.com/docsifyjs/docsify/master/CHANGELOG'
      }
    },
  })

  middleware.push(function(req, res, next) {
    console.log('req.url', req.url)

    // var deviceAgent = req.headers["user-agent"].toLowerCase();
    // if(deviceAgent.includes('+http')){
    //   renderer.renderToString(req.url).then(html => res.end(html))
    // } else {
    //   return next()
    // }


    if (/\.(css|js)$/.test(req.url)) {
      return next()
    }
    renderer.renderToString(req.url).then(html => res.end(html))

  })
}

const params = {
  port: 3000,
  watch: ['lib', 'docs', 'themes'],
  open: false,
  middleware
}

liveServer.start(params)

node t.js 即可打开 ssr 渲染的页面。

问题简述

虽然可以 ssr 渲染了，但是如果把 basePath 设置成本地目录，点击其他菜单时就会找不到文件， github 仓库目录虽然能找到文件，

但是速度很慢，可能 t.js 文件需要先去 github 上请求到 .md 文件，再渲染为 .html 所以比较慢。

慢也就算了，却还有一个时有时无的问题，比如你打开 /a/b/c 这个的文档，有时候可以渲染出现，有时候却不能，有时候又渲染了一半，

不知道是由于 github 的连接速度倒是的还是什么。我在自己的服务器上测试时没有成功，因为服务器内存太小，安装依赖时总是崩溃。

可能还有其他方案可以尝试

继续研究看看是不是 github 速度导致的时有时无的问题, 通过虚拟内存或仅安装所用依赖来在服务器上测试。
可以研究下 docsify 提供的 ssr 示例 https://docsify.now.sh/ 是如何完成的，他这个看起来还比较正常，可能有个 build dist 类似的命令可以把 ssr 的东西都渲染成静态 html 文件也说不一定。

后记

可以直接安装 docsify-server-renderer

// 处理错误: [email protected]@docsify-server-renderer/build.js:349:30
// 处理错误: [email protected]@docsify-server-renderer/build.js:553:37

经后面实测，发到自己服务器上正常，故与国内访问 github 速度有关。唉，仰天而望：天朝啊！

使用本地文件

另外，既然他能去 github 获取内容，那么应该可以把获取内容的地方拦截为本地的内容即可，有时间再研究。

扫描二维码关注公众号，回复： 6569497 查看本文章