[源码学习] nuxt 基于vue的ssr框架

[DaZhaoLis]

背景

最近在想如何改善seo，发现在框架中改善seo通常有如下几个方法：

• 使用PhantomJS为动态页面提供静态页面渲染，用Prerender.io 将渲染好的页面给爬虫，这样就不用自己服务器渲染啦~

• 通过判断来访请求的 User-Agent 和Nginx来让不同的后端服务器进行响应，如果是爬虫就返回渲染好的静态页面，如果是用户就返回动态页面。

• webpack插件类：
  prerender-spa-plugin

• 根据服务器同构的方式将页面返回给前端，例如react的Next.js vue的nuxt.js

什么是SSR

参考我的另外一篇文章

目标

加深对ssr的理解，为后续项目做知识储备。

Nuxt的简介

Nuxt要解决什么问题

自己的解决方案

发布Npm包让别人使用

common AMD CMD esMoudle programmatically middleware

Render a specific route

在命令行使用

持续集成

代码规范（eslint stylelint）

travis和apveyor

让别人参与

选择一个工作流 （github flow）

提交issue方式和共享方法

解决SSR的问题

数据的统一

API数据缓存

权限的统一

路由的统一

渲染的性能

压测性能

灯塔

渲染策略（只首页，全站）

动静分离

服务器渲染缓存

客户端缓存

cache etage

serviceworker

网络

http2.0

Nuxt的源码解读

框架轮廓

目录结构

流程

模块解读

附录（使用的npm包）

vue-server-renderer vue的ssr核心 ，要研究下2333
lru-cache 页面缓存
vue-meta 修改htmo meta
collective 是一个来参与贡献的网站
ava 是快速的测试框架 https://github.com/avajs/ava
nyc配合ava一起使用来查看代码覆盖率
debug 更好的打印日志
yargs 获取命令行输入
cheerio 模拟dom在node中
JSDOM的目标是提供一个我们在浏览器里面看到的相同的 DOM 环境。我从没有真的需要所有这些东西，我只是想要一个简单的，相似的方法去处理HTML。

文献引用

The offline cookbook
React同构思想
Webpack实战-构建同构应用
moudle
nuxt.js
vue-server-renderer
前端渲染与 SEO 优化踩坑 小记
https://segmentfault.com/a/1190000009842518
https://ppt.baomitu.com/d/a8a49a00#/68

[DaZhaoLis]

vue-server-renderer

vue-server-renderer是啥

解决啥问题，可以干啥，我要怎么做，会带来啥问题，要怎么解决

[DaZhaoLis]

阅读源码过程的side effect：

1. 更加的了解了process/moudle/event loop
2. 了解测试框架，( 还真多呀。。
3. 总结了阅读源码的优秀实践，之前虽然读过些源码，但感觉这次更有效率 233