单页应用 / 多页应用、客户端渲染 / 服务器渲染

简介: 单页应用 / 多页应用、客户端渲染 / 服务器渲染

序言



现在各种名词泛滥,写下这篇文章补补相关的基础知识吧,当然说的都是 web 应用相关。



单页应用 / 多页应用



单页应用:


1、单页应用并不是说用户最终看到的就只有一个页面,而是指在开发层面上只有一个  html 文件,至于用户看到的多个页面均是在这一个 html 文件中对应生成。


2、由于单页应用中“多页”的生成是在同一个 html 中部分渲染完成的,所以不需要浏览器重新下载、解析、渲染另外的 html 文件,响应速度更快,用户的体验更好,这应该是最大的优势。


3、由于单页应用中的“多页”是通过 js 生成的,而传统的是需要分析完整的  html 文件,所以不利于 SEO (搜索引擎优化),至于 SEO 就是为了让你输入某个关键词后能够更好更靠前的搜索到你的应用。


4、单页应用在首屏渲染的时候需要加载的东西过多,往往会导致首屏速度很慢。


多页应用:


1、与单页应用相反,多页应用指的是每个页面独立对应一个自己的 html 文件。


2、每个页面的跳转都需要重新下载、解析、渲染 html 文件,响应速度较慢。最大的劣势吧。


3、每个页面都是完整的 html ,便于 SEO 。


4、每个页面相互独立,可以分别升级维护,但涉及到不同页面之间的数据交互就比较麻烦。


小结:简单的展示型的应用,多页应用一般更适合,SEO 也有天然的优势。但对于用户交互要求更高的应用,往往使用单页应用,至于单页应用的 SEO 已经有了很多好的实践和解决方案,而首屏的问题也可以交给服务器渲染来解决。



客户端渲染 / 服务器渲染



服务器渲染:


1、服务器渲染,也叫后端渲染,就是指在后台生成 html 并在相应的地方插入好数据然后传递给前端(浏览器)。


2、后台输出的是完整的 html ,利于 SEO ,但也很死板。


3、服务器一般计算速度更快,但会占用了相应的服务器资源。


4、传递给前端的数据量更大,更加占用网络传输资源。


客户端渲染:


1、客户端渲染,也叫前端渲染,兴起于前后端分离,前端通过 API 接口从后台获取数据然后自行处理。


2、相比于服务器渲染更灵活,但也不便于 SEO 。


3、减轻了服务器的压力,网络传输数据量小,前端专注于用户界面和交互,后台专注于业务逻辑和数据持久化,分工更明确。


小结:服务器渲染其实是一种很古老的方式, PHP、jsp 这种玩意儿就是服务器渲染,重展示、弱交互、重 SEO 的业务场景更适合用服务器渲染,当然还有首屏渲染。前端渲染适合交互性更强的应用。



总结



单页应用、多页应用、服务器渲染、客户端渲染,这四者其实是紧密联系并且相互关联的,在如今移动互联网的时代下,更注重用户交互的单页应用和客户端渲染正在占据更多的份额,而服务器渲染也就配合干干 SEO 和首屏渲染的活儿了。除此之外还有同构渲染的方式也在快速的发展,至于同构渲染我研究的并不多,所以就不多说了。

目录
相关文章
|
2月前
|
存储 缓存 前端开发
如何优化 SSR 应用以减少服务器压力
优化SSR应用以减少服务器压力,可采用代码分割、缓存策略、数据预加载、服务端性能优化、使用CDN、SSR与SSG结合、限制并发请求、SSR与CSR平滑切换、优化前端资源及利用框架特性等策略。这些方法能有效提升性能和稳定性,同时保证用户体验。
|
29天前
|
存储 人工智能 自然语言处理
ChatMCP:基于 MCP 协议开发的 AI 聊天客户端,支持多语言和自动化安装 MCP 服务器
ChatMCP 是一款基于模型上下文协议(MCP)的 AI 聊天客户端,支持多语言和自动化安装。它能够与多种大型语言模型(LLM)如 OpenAI、Claude 和 OLLama 等进行交互,具备自动化安装 MCP 服务器、SSE 传输支持、自动选择服务器、聊天记录管理等功能。
170 15
ChatMCP:基于 MCP 协议开发的 AI 聊天客户端,支持多语言和自动化安装 MCP 服务器
|
2月前
|
开发框架 .NET C#
在 ASP.NET Core 中创建 gRPC 客户端和服务器
本文介绍了如何使用 gRPC 框架搭建一个简单的“Hello World”示例。首先创建了一个名为 GrpcDemo 的解决方案,其中包含一个 gRPC 服务端项目 GrpcServer 和一个客户端项目 GrpcClient。服务端通过定义 `greeter.proto` 文件中的服务和消息类型,实现了一个简单的问候服务 `GreeterService`。客户端则通过 gRPC 客户端库连接到服务端并调用其 `SayHello` 方法,展示了 gRPC 在 C# 中的基本使用方法。
50 5
在 ASP.NET Core 中创建 gRPC 客户端和服务器
|
2月前
|
弹性计算 开发工具 git
2分钟在阿里云ECS控制台部署个人应用(图文示例)
作为一名程序员,我在部署托管于Github/Gitee的代码到阿里云ECS服务器时,经常遇到繁琐的手动配置问题。近期,阿里云ECS控制台推出了一键构建部署功能,简化了这一过程,支持Gitee和GitHub仓库,自动处理git、docker等安装配置,无需手动登录服务器执行命令,大大提升了部署效率。本文将详细介绍该功能的使用方法和适用场景。
2分钟在阿里云ECS控制台部署个人应用(图文示例)
|
1月前
|
开发框架 .NET PHP
网站应用项目如何选择阿里云服务器实例规格+内存+CPU+带宽+操作系统等配置
对于使用阿里云服务器的搭建网站的用户来说,面对众多可选的实例规格和配置选项,我们应该如何做出最佳选择,以最大化业务效益并控制成本,成为大家比较关注的问题,如果实例、内存、CPU、带宽等配置选择不合适,可能会影响到自己业务在云服务器上的计算性能及后期运营状况,本文将详细解析企业在搭建网站应用项目时选购阿里云服务器应考虑的一些因素,以供参考。
|
2月前
|
安全 开发工具 Swift
Swift 是苹果公司开发的现代编程语言,具备高效、安全、简洁的特点,支持类型推断、闭包、泛型等特性,广泛应用于苹果各平台及服务器端开发
Swift 是苹果公司开发的现代编程语言,具备高效、安全、简洁的特点,支持类型推断、闭包、泛型等特性,广泛应用于苹果各平台及服务器端开发。基础语法涵盖变量、常量、数据类型、运算符、控制流等,高级特性包括函数、闭包、类、结构体、协议和泛型。
38 2
|
2月前
|
数据采集 前端开发 搜索推荐
|
2月前
|
数据采集 缓存 前端开发
服务器端渲染(SSR)
服务器端渲染(SSR)
|
2天前
|
弹性计算 数据挖掘 应用服务中间件
阿里云轻量应用服务器68元与云服务器99元和199元区别及选择参考
目前阿里云有三款特惠云服务器,第一款轻量云服务器2核2G68元一年,第二款经济型云服务器2核2G3M带宽99元1年,第三款通用算力型2核4G5M带宽199元一年。有的新手用户并不是很清楚他们之间的区别,因此不知道如何选择。本文来介绍一下它们之间的区别以及选择参考。
128 84
|
12天前
|
机器学习/深度学习 人工智能 PyTorch
阿里云GPU云服务器怎么样?产品优势、应用场景介绍与最新活动价格参考
阿里云GPU云服务器怎么样?阿里云GPU结合了GPU计算力与CPU计算力,主要应用于于深度学习、科学计算、图形可视化、视频处理多种应用场景,本文为您详细介绍阿里云GPU云服务器产品优势、应用场景以及最新活动价格。
阿里云GPU云服务器怎么样?产品优势、应用场景介绍与最新活动价格参考