什么是单页面应用(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等搜索引擎收录快照;
什么是服务端渲染(SSR)?
SSR: 服务端渲染(Server Side Render),即:网页是通过服务端渲染生成后输出给客户端。 在 SPA 之前的时代,我们的Web架构大都是 SSR,如:Wordpress(PHP)、JSP技术、JavaWeb…或者 DEDECMS、Discuz! 等这些程序都是传统典型的 SSR 架构, 即:服务端取出数据和模板组合生成 html 输出给前端,前端发生请求时,重新向服务端请求 html 资源,路由也由服务端来控制。 其次,有个概念叫预渲染(Prerendering)。 如果你只是用服务端渲染来改善一个少数的营销页面(如 首页,关于,联系 等等)的 SEO,那你可以用预渲染来实现。 预渲染不像服务器渲染那样即时编译 HTML,它只在构建时为了特定的路由生成特定的几个静态页面,等于我们可以通过 Webpack 插件将一些特定页面组件 build 时就编译为 html 文件,直接以静态资源的形式输出给搜索引擎。
优点:对于SEO友好、首屏加载速度快;
缺点:页面重复加载次数高、开发效率低、数据传输量大、服务器压力大;
SPA、SSR分别适合什么样的应用场景?
SPA:对项目性能要求高、页面加载速度快、要求客户端渲染、对SEO要求低;
SSR:对项目SEO要求高、首次打开响应速度快;
客户端渲染与服务端渲染本质的区别:
1、传输数据不同 (Chrome > 控制台 > Network > Preview > 查看传输内容)
客户端渲染:传递JSON对象、由浏览器渲染视图;
服务端渲染:传递完整HTML返回给浏览器渲染;
seo
即 搜索引擎优化(Search Engine Optimization),它是指通过站内优化,如:网站结构调整、网站内容建设、网站代码优化以及站外优化等方法,来进行搜索引擎优化。
简单说: 通过各种技术(手段)来确保,你的Web内容被搜素引擎最大化收录,最大化提高权重,带来更多流量。目前SEO;流量是变现的快车道,SEO 是低成本获取流量的最佳方法。
SEO优化问题(Chrome > 右击 > 检查网页源代码)
- 单页面应用:客户端渲染、源代码中无法获取到动态渲染的数据、不利于SEO爬虫
- 服务端渲染:首次渲染的html中携带所有服务器端返回的数据,原代码中包含所有数据,利于SEO优化;
传统的Vue.js原来是开发SPA(单页应用)的,但是随着技术的普及,很多人想用Vue开发多页应用,并在服务端完成渲染。这时候就出现了Nuxt.js这个框架,她简化了SSR的开发难度。还可以直接用命令把我们制作的vue项目生成为静态html。