什么是SEO？和SPA与SSR又有什么关系？

1、什么是SEO？

SEO（Search Engine Optimization）：汉译为搜索引擎优化。就是指按照搜索引擎的算法，提升你的文章在搜索引擎中的自然排名，比如百度。

那网站在首页有什么好处呢？举个例子，长沙的老王事业很顺利，家庭很幸福，也赚了不少钱，老王和老婆小张一商量，准备把房子重新装修一下，老王的老婆小张也表示想要温馨一点的甜蜜的装修风格

于是就百度搜索了一下“长沙装修公司”结果就出来了，看到了很多装修公司的网站，都在首页第一第二，只有把网站优化在首页才能获得高的曝光，没有人会有耐心去翻看第10页，20页的网站，一看网站也很全面，很专业，这个时候，就创造了大量需求

老王夫妇在中国几亿的年轻夫妻中仅仅是一个需求用户的代表，假设你是一个装修提供商或者是和装修公司合作，你就可以做一个网站，在网站上发布你的产品，设定好关键词，填充内容，优化技术也不错

2、什么是单页面应用（SPA）？

即 单页 Web 应用（single page web application，SPA），就是只有一张 Web 页面的应用，是加载单个 HTML 页面并在用户与应用程序交互时动态更新该页面的 Web 应用程序

简单说： Web 不再是一张张页面，而是一个整体的应用，一个由路由系统、数据系统、页面（组件）系统…组成的应用程序，其中路由系统是非必须的。 大部分的 Vue 项目，本质是 SPA 应用，Angular.js、Angular、Vue、React…还有最早的”Pjax”均如此。

SPA 时代，主要是在Web端使用了history或hash（主要是为了低版本浏览器的兼容）API，在首次请求经服务端路由输出整个应用程序后，接下来的路由都由前端掌控了，前端通过路由作为中心枢纽控制一系列页面（组件）的渲染加载和数据交互。 而上面所述的各类框架则是将以：路由、数据、视图为基本结构进行的规范化的封装。 最早的 SPA 应用，由 Gmail、Google Docs、Twitter 等大厂产品实践布道，广泛用于对SEO要求不高的场景中。

优点：客户端渲染、数据传输量小、减少服务器端压力、交互/响应速度快、前后端完全分离；

缺点：首屏加载慢、对SEO不友好，不利于百度，360等搜索引擎收录快照；

3、什么是服务端渲染（SSR）？

SSR： 服务端渲染（Server Side Render），即：网页是通过服务端渲染生成后输出给客户端。 在 SPA 之前的时代，我们的Web架构大都是 SSR，如：Wordpress（PHP）、JSP技术、JavaWeb…或者 DEDECMS、Discuz! 等这些程序都是传统典型的 SSR 架构， 即：服务端取出数据和模板组合生成 html 输出给前端，前端发生请求时，重新向服务端请求 html 资源，路由也由服务端来控制。 其次，有个概念叫预渲染（Prerendering）。 如果你只是用服务端渲染来改善一个少数的营销页面（如 首页，关于，联系 等等）的 SEO，那你可以用预渲染来实现。 预渲染不像服务器渲染那样即时编译 HTML，它只在构建时为了特定的路由生成特定的几个静态页面，等于我们可以通过 Webpack 插件将一些特定页面组件 build 时就编译为 html 文件，直接以静态资源的形式输出给搜索引擎。

优点：对于SEO友好、首屏加载速度快；

缺点：页面重复加载次数高、开发效率低、数据传输量大、服务器压力大；

那么为什么SSR可以提升SEO呢？这是因为搜索引擎的搜录机制决定的！

百度搜索的基本原理是：用户输入关键词，百度将用户输入的关键词与索引库中的网页进行匹配，这里的索引库其实就是百度通过爬虫收录的页面HTML源码内容，检索匹配度越高的网页排名越前。百度搜索的核心算法是基于 PageRank 的概率统计模型。百度搜索的核心算法是基于PageRank的概率统计模型。百度董事长李彦宏曾经透露，百度的搜索结果排名靠的是“人气”。也就是说，一个网页越受欢迎，它被点击的可能性就越大，因此排名也就越靠前。另外，百度还考虑到了网页内容的相关性。总的来说，百度的排名算法是一个复杂的统计模型，考虑了网页内容和网页人气等多个因素。

SPA、SSR分别适合什么样的应用场景？

SPA：对项目性能要求高、页面加载速度快、要求客户端渲染、对SEO要求低；

SSR：对项目SEO要求高、首次打开响应速度快；

4、客户端渲染与服务端渲染本质的区别：

传输数据不同 （Chrome > 控制台 > Network > Preview > 查看传输内容）

客户端渲染：传递JSON对象、由浏览器渲染视图；

服务端渲染：传递完整HTML返回给浏览器渲染；

SEO优化问题（Chrome > 右击 > 检查网页源代码）

• 单页面应用：客户端渲染、源代码中无法获取到动态渲染的数据、不利于SEO爬虫
• 服务端渲染：首次渲染的html中携带所有服务器端返回的数据，原代码中包含所有数据，利于SEO优化；

传统的Vue.js原来是开发SPA（单页应用）的，但是随着技术的普及，很多人想用Vue开发多页应用，并在服务端完成渲染。这时候就出现了Nuxt.js这个框架，简化了SSR的开发难度。还可以直接用命令把我们制作的vue项目生成为静态html。