SPA单页面应用程序有什么好处？能做好搜索引擎优化（SEO）吗？

说到SEO，我最近遇到的一个难题是，前后端分离的网站对SEO特别不友好，尤其是最新的前端框架，AngularJS、ReactJS、VueJS，都存在同样的问题。

SPA单页应用有什么好处？

高效接入、开发效率更高、代码维护更便捷等等，，

知乎首页是典型的单页应用（zhihu.cm）

还有饿了么官网（ele.me）

等等很多...

SPA单页应用能否支持良好的搜索引擎优化（SEO）？

有能力的！ 一个字，绝对！ 但确实很不友好（特别不友好）。 过去，前端页面都是使用标签格式化或者直接在后台渲染（MVC模式）。 当时的前端显示是一个静态页面，有一个链接指向它，可以直接静态显示（index.html/default.html），也可以使用参数调用（index.php/index.asp?from=outside） ），而且搜索引擎可以直接识别静态连接和带参数的连接，所以收录和排名都是比较容易做到的。

然而，技术创新带来了一些弊端（或者人们根本不在乎？），那就是搜索引擎根本不识别新技术的前端页面，因为从搜索引擎的角度来看，SPA应用是单一的——页面应用程序，就像它的名字一样。 ，根本就只有一页！

也许看到这里你会说我在胡说八道，但是与以前的页面设置和对路由的支持相比，现在的单页程序基本上都是在同一个页面上编写的，而且每个“新页面”显示出来的其实，这只是不同的路线。 在传统的写法中，这是页面中的一个锚点，但是新的搜索引擎也认为这只是页面中的一个锚点（虽然锚点有很多...），所以无论怎样才能整个网站看起来像一页？ 你认为它能得到多少个索引？

传统锚

写法：
关于我们
点击之后的连接为：
http://yourdomain.com/index.html#AoutMe

SPA单页应用的路由调用

写法：

//这个是组件

点击之后的连接为：
http://yourdomain.com/#/AboutMe/

看看这个写法是不是很像？

繁体书写（省略后缀）：

#AoutMe

在SPA单页应用程序中：

＃/关于我/

你看得到差别吗？ 区别就在于“#”。 传统的写法中，#是作为锚点使用的。 点击A标签可以直接指向页面上的特定位置，而在SPA单页应用中，点击链接会跳转到新页面。

以上是我们作为访问者看到的结果，但是在蜘蛛（搜索引擎信使）眼中，当他们在您的网站上找到#时，他们认为这是一个锚点。 那么他认为这是什么？ 它会告诉搜索引擎这是一个锚点。 我们还没有爬出这个页面。 当它的时间到了（蜘蛛在每个站点上的时间是有限的），我们正要离开时，我们发现我们仍然没有爬出这个页面。 ，那就只是像搜索引擎报告一样，这是一个单页，只有一页，所以就给它一个包含吧！

后果是什么？

蜘蛛爬行SPA单页应用，但找不到网站中的内容，也找不到下级链接。 它只能给你收录（或者忽略你），那么你的排名能上去吗？ 你的收藏能完成吗？

怎么解决？ 或者有什么解决办法吗？

当然，每一项新技术都提供了最新的解决方案（尽管并不令人满意），包括如何判断蜘蛛和用户、为蜘蛛渲染一套单独的代码、以及使用传统方法生成每个单独的页面程序。 然后调用不同的头和步骤。

SSR的介绍

概述

SSR是服务器端渲染的缩写。 普通的SPA中，一般都会将框架和网站页面代码发送到浏览器，然后在浏览器中生成并操作DOM（这也是第一次访问SPA）。 网站速度比传统方法（在相同带宽和网络延迟下，后端生成HTML并发送给浏览器）要慢的主要原因），但事实上，SPA应用也可以打包在服务器上，并且HTML 可以在服务器上呈现并发送到浏览器。 在浏览器中，这样的HTML页面尚不具备交互能力，因此需要配合SPA框架将其“混合”成浏览器上的交互应用。 因此，只要能够合理利用SSR技术，不仅可以在一定程度上解决首屏慢的问题，还可以实现更好的SEO。

SSR的优点

SSR的缺点

常见的SSR框架

我对 React 和 Next 不熟悉，所以不发表评论。 不得不说Nuxt的用法实在是太美了。 它有一定的约束（没有规则就没有规则）而不损失可扩展性。 官方网站上的文档也非常好。

（SSR部分摘自简书网友文章）

后记

这里我要说的是，新技术的出现并不意味着旧技术和使用旧技术的应用会被淘汰（短期内不会），但我们还是要追随新技术。 毕竟，硬件设备的快速发展和旧技术的局限性也在慢慢显现。 新技术自然可以更有效地与新设备结合，创造出用户体验更好的产品。