SPA和SSR页面的区别

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

什么是单页面应用(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。

相关文章
|
8天前
|
数据采集 缓存 搜索推荐
服务端渲染(SSR)与静态站点生成(SSG)结合使用
服务端渲染(SSR)与静态站点生成(SSG)结合使用
|
24天前
|
缓存 JavaScript 搜索推荐
Vue SSR(服务端渲染)预渲染的工作原理
【10月更文挑战第23天】Vue SSR 预渲染通过一系列复杂的步骤和机制,实现了在服务器端生成静态 HTML 页面的目标。它为提升 Vue 应用的性能、SEO 效果以及用户体验提供了有力的支持。随着技术的不断发展,Vue SSR 预渲染技术也将不断完善和创新,以适应不断变化的互联网环境和用户需求。
35 9
|
3月前
|
存储 JavaScript
纯Vue实现网页日常任务清单小功能(数据存储在浏览器)
这篇文章介绍了如何使用纯Vue实现一个网页日常任务清单的小功能,数据存储在浏览器中以保持数据持久化。文章内容包括功能描述、效果演示、核心代码修改方法,以及已经打包好的项目源码下载链接。作者还提供了友情提示,指出了数据存储到浏览器的核心代码部分,方便读者快速理解和应用。
|
5月前
|
JavaScript Serverless 网络架构
Next.js与SSR:构建高性能服务器渲染应用
创建Next.js项目使用`create-next-app`,每个页面自动支持SSR。动态路由如`pages/posts/[id]`,在`getStaticPaths`和`getServerSideProps`中获取数据。利用静态优化和预渲染提升性能,动态导入减少初始加载时间。使用`next/image`优化图片,自定义服务器增加控制,集成第三方库如Redux。优化SEO,利用i18n支持多语言,使用Serverless模式和Web Workers。项目支持TypeScript,创建`_error.js`处理错误,部署到Vercel并使用工具进行性能监控和优化。
218 4
|
6月前
|
资源调度
在 Next.js 中使用自定义服务器框架进行服务器端渲染
在 Next.js 中使用自定义服务器框架进行服务器端渲染
|
6月前
|
JavaScript 前端开发 搜索推荐
Vue 的服务器端渲染(SSR)和客户端渲染(CSR)在渲染过程、性能、用户体验等方面都存在显著的区别
【5月更文挑战第8天】Vue 的 SSR 和 CSR 在渲染上有明显差异。SSR 服务器端生成 HTML 返回给浏览器,提供更快首屏加载和更好的 SEO,但增加服务器负担。CSR 客户端渲染,首次加载可能较慢,但交互更流畅,开发更简单。两者各有优劣,需根据项目需求权衡选择。
54 2
|
6月前
|
数据采集 资源调度 前端开发
React的服务器端渲染:使用ReactDOMServer进行高效页面预渲染
【4月更文挑战第25天】使用ReactDOMServer,React支持服务器端渲染以实现高效预渲染。通过在Node.js环境中将React组件转化为HTML字符串,减少客户端JavaScript负载和渲染时间。优点包括更快首屏加载、改善SEO和兼容无JavaScript环境,但也会增加服务器负载、复杂性和状态管理挑战。开发者需根据项目需求平衡SSR和CSR。
|
6月前
|
缓存 前端开发 搜索推荐
服务端渲染(SSR)与静态网站生成(SSG):Next.js入门
服务端渲染(SSR)与静态网站生成(SSG):Next.js入门
338 0
|
6月前
|
数据采集 搜索推荐 JavaScript
Next.js进阶:静态生成、服务器端渲染与SEO优化
【4月更文挑战第13天】Next.js是现代Web开发的关键框架,以其对静态生成(Static Generation)、服务器端渲染(Server-Side Rendering)和SEO的支持而备受青睐。本文深入解析了这三个核心特性的原理、应用和最佳实践。静态生成在构建时生成HTML,适用于内容更新少的页面,通过`getStaticProps`和`getStaticPaths`获取静态数据。服务器端渲染则在每次请求时生成HTML,适合实时数据,使用`getServerSideProps`获取服务器端数据。
212 0
|
6月前
|
前端开发 JavaScript 搜索推荐
单页面应用与多页面应用的区别?
单页面应用与多页面应用的区别?
30 0
下一篇
无影云桌面