Velas Weekly Issue 3

Mmmm... 感觉好久也没有更新News了。虽然这篇文章是稍微来得有那么一点晚，但是Velas本身是刚刚经过了一次天翻地覆的大更新，也可能在相当长的一段时间内不会再有那么大的更新了 （虽然你每次都那么说）

OK，让我们快来看一下这次更新了什么吧

摘要

• 使用服务端渲染重构的Velas
  • 什么是服务端渲染
  • SEO与更快的首屏加载
  • 图片懒加载
  • API缓存
• One Velas
• 全新的留言板
• What's next?

Velas in SSR

记得在上一篇文章里说要使用Prerendering帮Velas做SEO优化的。但是在下载prerender-spa-plugin包时由于你懂的的原因，费了好大半天的时间都装不上，还不小心把我的npm给弄坏了……一气之下，决定一劳永逸，直接让Velas上SSR

What is SSR?

Mmmm...这里要说的SSR并不是指Superior Super Rare，而是服务端渲染（Server-Side Rendering）。之前的Velas使用了SPA（Single-Page Application - 单页应用程序）进行构建，SPA虽然有着快速的页面切换速度和优秀的前后端分离特性等优点，但是却在SEO（即对搜索引擎的友好程度）和内容到达时间（time-to-content，即网站首次加载的时间）上有着一定的劣势。因此在构建一个网站，而不是一个Web应用程序方面上、，SPA并不是一个完美的解决方案。而SSR在继承了SPA所有的优点的同时，还有效弥补了这两个缺点。对用户和搜索引擎爬虫来说，SSR渲染出来的网页与传统的服务端模版渲染以及传统静态网站别无二致。

那这么说来，SSR就是一个完美的解决方案了咯？

不是的。 SSR开发对前端开发人员的要求更高，他需要开发者有足够丰富的服务端开发经验。同时，SSR对服务器本身的要求也更高。在SPA中，整个网页视图都是在用户的浏览器上生成的，而SSR则需要在服务端完成一个网页大部分的渲染任务，并将生成的结果发送到用户的浏览器。这个过程相比SPA来说将消耗服务器大量的资源。再者就是，将一套代码同时运行在服务端和浏览器端会不会是一种太过激进的做法？

不管怎么说，相比较SPA，SSR为我们带来了一个加载速度更快、更像网页的Velas，而且多亏了nuxt.js的优秀特性，帮助我快速完成了Velas从SPA到SSR的迁移。

那说了那么多，SSR版的Velas的实际情况如何呢？

SEO

多亏了SSR，现在搜索引擎可以轻易“看穿”Velas了。除了在生成网站地图（sitemap）上更容易以外，Velas的各个网页站点，以及网页内容现在也可以被搜索引擎捕捉到。

来看看谷歌的结果：

搜索“velas电波站”，会发现不仅这个子站点被搜到了，还一并列出了Velas的其他站点。同时，在概览中还显示了这个网页的内容。这在以前使用SPA的时候是不能做到的。

当然，如果说Google的爬虫支持Javascript，所以这个结果不能说明什么的话，我们试试搜一个利用Ajax获取的数据：

可以看到，在之前通过Ajax获取并自动生成的页面如今也成功被渲染成了静态页面且能被搜索引擎爬虫抓取，也意味着以后在Velas发表的每一篇文章都能被搜索引擎搜到啦，是不是非常Exciting呢？

哪怕傲娇如百度，还是可以看到页面内容的。嗯……

更快的首屏加载

在SPA版本中，Velas首次加载是有一段白屏加载时间的 （什么，你说以前也感觉不出来吗？那一定是我调教得太好了） ，而SSR版本的Velas由于采用了服务端渲染， 理论上 会使得这段白屏时间在一定程度上有所减少。至于为什么实测中SPA的DOM加载完成时间还比SSR短500ms，我觉得是因为SPA使用了CDN Combo，而SSR的vendor包目前是直接从我的服务器上下载所导致的。这也说明后续还有一定的优化空间 （虽然我也不觉得那500ms对于这个小破站来说能改变什么）。

图片懒加载

是的，现在我为Velas上几乎所有的图片都加上了图片懒加载功能。也就是说，Velas只会先加载你的浏览器窗口看到的图片，然后才加载其他的。这为Velas的打开速度提速1s~6s不等（根据当前页面的图片数量和大小而定）。不要问我以前为什么没想到要加上去，这并不是SSR独有的功能……

与此同时，我还为图片懒加载添加了一个小小的过渡动画，希望能带给你赏心悦目的体验～

API缓存

由于目前为止，博客和新闻的文章和文章列表获取用的还是通过Github提供的API。在转为服务端渲染后，首次API的数据获取改为了在服务端上完成。当有多人或是被恶意刷新同时访问Velas时，就会重复向API发起数据请求，很容易就会被Github认定为恶意访问并暂时封停API。为了避免这种情况发生，我为这部分的接口加上了服务端数据缓存。每次从API获取数据后，服务端将自动把这份数据保留相当长的一段时间，直至这段数据过期，从而有效解决了这个情况发生。当然，也加快了二次数据获取的速度啦，尤其当网络连接不畅的时候 （明明这个才是初衷啊噗）。

One Velas

现在，你可以在velas.xyz这个站点查看我所有的博客和camp项目啦，为此我还为他们根据Velas原有的风格重新设计了一个界面。

Velas Talk（现在为Velas博客）

Velas Camp（现在为Velas探索）

当然，Talk还有一些功能没搬到这里，像文章的分类显示、按标签查看等，以后会陆续搬过来。希望你们会喜欢～

全新的留言板

是的！在Velas搭建3年之后，我们终于迎来了这个功能，而且这个留言板是实时的！live！而不像最初用Javascript“伪造”的版本！为了这个页面的搭建，我还专门为Velas建了一个服务器和数据库……虽然他们以后还会用到。目前只能实现基本的留言功能，关于留言回复功能还要再等等……希望大家踊跃留言吧～

下一步？

Mmmm，毫无疑问，除了继续完善SSR的Velas外（由于我的水平所限，目前这个Velas比之前的SPA版的bug要多一些。而且单靠我的力量可能有一些bug还发现不了……如果你们发现了什么bug的话，请务必在留言中告诉我，我会非常感激的！），就是要完成电波站页面的搭建，用来发表我在我感兴趣的领域的评论，毕竟那才是我最初制作Velas的目的。（然鹅3年过去了……） 而搭建电波站需要先完善我的服务端以及网站后台的搭建，这将是一项工作量非常巨大的任务。再加上我现在要开始研究生课程的学习了，相信接下来的时间会十分紧张。但我还是会尽我所能抽时间更新的。

Q：Velas还会换架构吗？

A：在相当长的一段时间内不会。 其一，我认为SSR这个技术本身已经满足了我搭建Velas的需求了，而且SSR本身也是目前前端里十分新颖的技术，除非有什么非常翻天覆地的技术革新，我也不会再做像Velas2017到2018这种大重构了 （我也已经学不动了） 。接下来，Velas将把注意力集中在内容的充实和网站后台的搭建上，我也希望Velas不再是一个花瓶 （能称得上花瓶吗？），而是一个能真正输出内容的网站。

让我们一起努力吧(・ω・)ノ