前端 SPA、SEO、SSR

https://www.jianshu.com/p/fcb98533bc18

连接： https://www.jianshu.com/p/fcb98533bc18.

SEO
概述
之前对于SEO的了解不多，也是最近才对SEO有了一些基本的了解。SEO（Search Engine Optimization），中文一般译作：搜索引擎优化。SEO是一种通过了解搜索引擎的运作规则（如何抓取网站页面，如何索引以及如何根据特定的关键字展现搜索结果排序等）来调整网站，以提高该网站在搜索引擎中某些关键词的搜索结果排名。
常用技术
搜索引擎优化中的技术大致可以分两类：白帽技术与黑帽技术，

在每页使用一个短、独特和相关的标题。
编辑网页，用与该页的主题。有关的具体术语替换隐晦的字眼。这有助于该站诉求的观众群，在搜索引擎上搜索而被正确导引至该站。
在该站点增加相当数量的原创内容。
使用合理大小、准确描述的汇标，而不过度使用关键字、惊叹号、或不相关标题术语。

SPA与SEO的冲突
前面我们谈到的SPA不利于SEO，因为就目前而言，部分搜索引擎如Google、bing等，它们的爬虫虽然已经支持执行JS甚至是通过AJAX获取数据了，但是对于异步数据的支持也还不足(也可能是搜索引擎提供商觉得没必要)，Vue SSR中是这样说的

如果你的应用程序初始展示 loading 菊花图，然后通过 Ajax 获取内容，抓取工具并不会等待异步完成后再行抓取页面内容。

前面也谈到过SPA应用中，通常通过AJAX获取数据，而这里就难以保证我们的页面能被搜索引擎正常收录到。并且有一些搜索引擎不支持执行JS和通过AJAX获取数据，那就更不用提SEO了。
对于有些网站而言，SEO显得至关重要，例如主要以内容输出为主的Quora、stackoverflow、知乎和豆瓣等等，那如何才能正常使用SPA而又不影响SEO呢？鲁迅曰：
此时，SSR便闪亮登场了

SSR
SSR是 Server-Side Rendering(服务器端渲染)的缩写，在普通的SPA中，一般是将框架及网站页面代码发送到浏览器，然后在浏览器中生成和操作DOM（这里也是第一次访问SPA网站在同等带宽及网络延迟下比传统的在后端生成HTML发送到浏览器要更慢的主要原因），但其实也可以将SPA应用打包到服务器上，在服务器上渲染出HTML，发送到浏览器，这样的HTML页面还不具备交互能力，所以还需要与SPA框架配合，在浏览器上“混合”成可交互的应用程序。所以，只要能合理地运用SSR技术，不仅能一定程度上解决首屏慢的问题，还能获得更好的SEO。

SSR的优点
更快的响应时间，不用等待所有的JS都下载完成，浏览器便能显示比较完整的页面了。这个个人深有体会，我的博客最开始仅仅使用了Vue.js，而没有做服务端渲染，加之服务器不在大陆，第一次输入地址到看到完整的页面几乎是过了4、5秒，有时候还更长。
更好的SSR，我们可以将SEO的关键信息直接在后台就渲染成HTML，而保证搜索引擎的爬虫都能爬取到关键数据。
SSR的缺点
相对于仅仅需要提供静态文件的服务器，SSR中使用的渲染程序自然会占用更多的CPU和内存资源
一些常用的浏览器API可能无法正常使用，比如window、docment和alert等，如果使用的话需要对运行的环境加以判断
开发调试会有一些麻烦，因为涉及了浏览器及服务器，对于SPA的一些组件的生命周期的管理会变得复杂
可能会由于某些因素导致服务器端渲染的结果与浏览器端的结果不一致。
SSR常用框架
React 的 Next
Vue.js 的 Nuxt
不熟悉React及Next，不作评价，我的博客便是使用了Nuxt做服务器端渲染，在此不得不说Nuxt的用法实在是太漂亮了，既有一定的约束（无规矩不成方圆），又不失扩展性，官网的文档也非常不错。

总结
前后端分离降低了前端和后端的耦合度，提高了开发效率；
SPA是前后端分离中前端的一种解决方案；
SEO对与很多网站很重要而普通的SPA又不利于SEO；
SSR的出现一定程度上解决了SPA中首屏慢的问题，又极大减少了普通SPA对于SEO的不利影响。