关于 docsify ssr 的研究
关于 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/docsify@4.9.4/lib/themes/vue.css" title="vue">
</head>
<body>
<!--inject-app-->
<!--inject-config-->
<script src="https://unpkg.com/docsify@4.9.4/lib/docsify.min.js"></script>
<script src="https://unpkg.com/docsify@4.9.4/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
// 处理错误: _docsify-server-renderer@4.9.1@docsify-server-renderer/build.js:349:30
// 处理错误: _docsify-server-renderer@4.9.1@docsify-server-renderer/build.js:553:37
经后面实测,发到自己服务器上正常,故与国内访问 github 速度有关。 唉, 仰天而望: 天朝啊!
使用本地文件
另外, 既然他能去 github 获取内容, 那么应该可以把获取内容的地方拦截为本地的内容即可, 有时间再研究。
关于 docsify ssr 的研究的更多相关文章
- 在阿里云 ECS 搭建 nginx https nodejs 环境(三、nodejs)
在阿里云 ECS 搭建 nginx https nodejs 环境(三.nodejs) 在阿里云 ECS 搭建 nginx https nodejs 环境(三.nodejs) 第一步 指定版本源 执行 ...
- SSR分子标记
参考: SSR标记 分子标记开发与筛选之SSR SSR 分子标记开发策略及评价 SSR分子标记在牡丹亲缘关系研究中的应用与研究进展 SSR(Simple Sequence Repeats)标记是近年来 ...
- 使用 PHP 来做 Vue.js 的 SSR 服务端渲染
对于客户端应用来说,服务端渲染是一个热门话题.然而不幸的是,这并不是一件容易的事,尤其是对于不用 Node.js 环境开发的人来说. 我发布了两个库让 PHP 从服务端渲染成为可能.spatie/se ...
- 从壹开始前后端分离 [ vue + .netcore 补充教程 ] 二八║ Nuxt 基础:面向源码研究Nuxt.js
前言 哈喽大家周五好,又是一个开开心心的周五了,接下来就是三天小团圆啦,这里先祝大家节日快乐咯,希望都没有加班哈哈,今天公司发了月饼,嗯~时间来不及了,上周应该搞个活动抽中几个粉丝发月饼的,下次吧,这 ...
- docsify网站文档工具用法总结
docsify , 网站文档动态生成工具,类似gitbook 特性 无需构建,写完文档直接发布 容易使用并且轻量 (~19kB gzipped) 智能的全文搜索 提供多套主题 丰富的 API 支持 E ...
- 用prerender-spa-plugin插件Vue项目优化SEO做ssr服务端渲染及预渲染
今天在做公交的时候没干,用手机看看文章,偶然发现了一个关于Vue优化seo的文章,我先是在Vue的官方文档看了一篇关于Vue做SEO优化的文章. 上面提到了nuxt.js这个框架,这个框架我做过一个小 ...
- 使用docsify并定制以使它更强大
背景 经常在网上看到一些排版非常漂亮的技术手册,左边有目录栏,右边是Markdown格式的文档,整个配色都十分舒服,就像一本书一样,一看就很让人喜欢.就比如Markdown Preview Enhan ...
- vue ssr 项目改造经历
vue ssr 项目改造经历 由于工作项目需求,需要将原有的项目改造,vue ssr 没有用到nuxt,因为vue ssr更利于seo,没办法,一个小白的改造经历, 首先说明一下,小白可以借鉴,高手也 ...
- 实现ssr服务端渲染demo
最近在研究SSR服务器端渲染,自己写了的小demo. 项目布局 ├── build // 配置文件 │ │── webpack.base // 公共配置 │ │── webpack.clien ...
随机推荐
- <script>标签的加载解析执行
转自原文 <script>标签的加载解析执行 看了很多网上的文章,都是大同小异.总结一下.内部原理还没有搞清楚,有机会再学习. 一.<script>标签的加载解析执行顺序 ht ...
- Linux vim 入门 配置 及 使用初步
网上能够找到的,关于VI的教程,更是多为能吓死人的上百页说明.事实上, 从我个人的实践看,全然不须要如此夸张.要完毕最主要的编辑.仅仅要熟悉几个命令,就是把VIM用得非常好. 这里就列举一下: Esc ...
- HDU 4526
DP. 设状态dp[i][j]表示j辆车后还剩余i个人的花费,枚举一个车的座位k,加上剩下人数i,注意i+k不能超过n,就很容易dp了. #include <iostream> #incl ...
- 3.0 - remote access 基础知识
RA概述: remote access: 广域网的远程连接,按L1分类: 1:通过电路交换网络实现的专线:(circuit switching) ~~~~~~~~~~~~~~~~~~~~~~~~~~~ ...
- 整理100道 .net面试题
前段时间,我在准备面试的时搜到的一套 net开发人员面试题,感觉比较全面,一直保存在草稿,刚在整理后台时翻了出来,干脆就发出来好了,以备不时之需. 1. .NET和C#有什么区别 答:.NET一般指 ...
- android之GMS认证
来到了新的公司,才知道做手机是须要做GMS认证的.于是从一个从没有做过GMS认证的小白到一个月做了8个项目的GMS认证.最后.自己都是吐了.每天晚上都是一个人傻傻在加班.更是知道了高通的支持力度让人发 ...
- luogu1273 有限电视网
题目大意 有一棵有根树,每个结点有一个收益,每条边有一个花费.如果要选择一个叶子结点,则根节点到该叶子结点的路径上的所有结点都必须被选择.求当总收益大于等于总花费的情况下,最多能选择多少个叶子结点. ...
- oc48--多个对象内存管理练习
// // main.m // 多个对象内存管理练习 // // ARC是Xcode帮我们生成内存释放的代码,MRC是需要我买自己写retain和release.想研究内存管理只能在MRC,管理对象就 ...
- KD树——k=1时就是BST,里面的数学原理还是有不明白的地方,为啥方差划分?
Kd-Tree,即K-dimensional tree,是一棵二叉树,树中存储的是一些K维数据.在一个K维数据集合上构建一棵Kd-Tree代表了对该K维数据集合构成的K维空间的一个划分,即树中的每个结 ...
- DataGuard总体结构
一.DataGuard总体结构 总体目标 1. 描述计划和非计划停机的不同因数 2. DataGuard的主要组件 3. 物理以及逻辑DataGuard的异同 4. 建立DataGua ...