单页面(SPA)与服务端渲染(SSR),概念、区别,优缺点

2023-10-31

单页面(SPA)与服务端渲染(SSR),概念、区别,优缺点

  • 什么是单页面应用?
  • 什么是多页面应用?
  • 二者有什么区别?

1、单页面应用与多页面应用:

单页面顾名思义就是整个应用只有一个Html页面,页面的切换其实是组件的切换。这样设计的好处就是不进行页面的切换应用会更加流畅,用户体验好,不需要记载整个页面。良好前后端分离,切换组件通过发ajax请求资源,服务端不进行渲染,服务端压力小。单页面的缺点有以下几点:初次加载时间长,为实现单页面的应用功能,需要在加载页面时JS和CSS统一加载;由于只有一个页面,不能使用浏览器的前进后退功能;对SEO很不友好,这一点单独解释。

2、为什么单页面应用对SEO不友好?

SEO也就是搜索引擎优化,这涉及到搜索引擎的机制,简单来说就是搜索引擎进行搜索时需要尽可能的获取页面完整的信息才能保证搜索的准确性,但是对于单页面来说,切换页面即切换组件,而切换组件又需要发送异步请求获取该组件需要的数据,而搜索引擎并不会等待组件加载异步数据,所以在单页面应用中,搜索引擎无法获取页面较为完整的信息,这就是单页面应用对SEO不友好的原因。

单页面应用不利于SEO的缺陷也是大家在尝试使用服务端渲染,多页面应用的主要原因

3、服务端渲染

服务端渲染就是在服务端对Vue界面进行渲染生成较为完整的html文件再传递给浏览器。浏览器接收到的就是完整的html页面不必发送请求数据去填充页面。这就保证了搜索引擎可以获取完整的页面信息。并且服务端渲染的这种机制也大大减少了首屏加载的时间。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

单页面(SPA)与服务端渲染(SSR),概念、区别,优缺点 的相关文章

  • es查询列表如何去重?

    SearchSourceBuilder builder new SearchSourceBuilder builder collapse new CollapseBuilder name keyword 在Elasticsearch中 bu
  • 【ES】Elasticsearch 简介

    大数据开发经常用到 Elasticesearch 今天做一下介绍 1 Elasticsearch 简介 Elaticsearch 简称为 ES 是一个开源的高扩展的分布式全文检索引擎 特点 近乎实时的存储 检索数据 扩展性好 可以扩展到上百
  • 面试总结(五):搜索引擎

    问题导读 1 搜索引擎有哪些特点 优势 2 搜索引擎使用到哪些场景中 3 如何将原文档传给分次组件 4 如何将得到的词 Term 传给索引组件 Indexer 搜索引擎概述全文搜索就是对文本数据的一种搜索方式 文本数据的都多 可以分为顺序搜
  • 使用Chrome浏览器的搜索引擎,谷歌浏览器开启同步功能

    试了很多方法使用谷歌的搜索和登录 结果都是页面加载失败 最后还是找到了一个插件 极简插件 https chrome zzzmh cn extension 右上角搜索 chrome同步助手 点击推荐下载 chrome 打开chrome 点击右
  • Elasticsearch 8.8.0 发布

    Elasticsearch 是一个基于 Lucene 库的搜索引擎 它提供了一个分布式 支持多租户的全文搜索引擎 具有 HTTP Web 接口和无模式 JSON 文档 Elasticsearch 基于 Java 开发 并在 SSPL Ela
  • 了解搜索引擎技术

    百度 Google搜索引擎核心技术是怎么实现的 搜索引擎 搜索引擎 search engine 是指根据一定的策略 运用特定的计算机程序搜集互联网上的信息 在对信息进行组织和处理后 并将处理后的信息显示给用户 是为用户提供检索服务的系统 全
  • WordPress网站的robots文件代码怎样写比较好

    本文记载和介绍的是wordpress的robots txt的在哪儿 以及如何修改robots文件来禁止搜索引擎爬取 ajax目录下的文章 以及如何优化WordPress网站的robots文件 wordpress设置robots文件的目录 w
  • 网络推广引流方法大全

    在互联网的圈子里有关网络推行的问题是一个永久的话题 你的商品哪怕再好假如没有推行进来一切都是白搭 经常听有人说 酒香不怕巷子深 但分离当今社会的方式 特别是在竞争日益严酷的今天我想 酒香也会怕巷子深了 进入互联网时期 企业产品推行再也不能仅
  • 【ES小结】还在用ElasticSearch做查询?换条思路实现高效数据统计

    博客首页 派 大 星 欢迎关注 点赞 收藏 留言 本文由派大星原创编撰 系列专栏 ES小结 本系列记录ElasticSearch技术学习历程以及问题解决 ElasticSearch高效数据统计 聚合查询 什么是聚合查询 Kibana 命令测
  • 实用常识

    WolframAlpha是开发计算数学应用软件的沃尔夫勒姆 Wolfram 研究公司基于科学计算软件Mathematica开发出的新一代的搜索引擎 试图挑战Google搜索引擎的地位 能根据问题直接给出标准化答案的网站 比如输入一种材料名称
  • Elasticsearch入门

    下载地址 Download Elasticsearch Elastic 浏览器查看启动情况 出现一下内容说明服务已启动 如果启动成功无法访问 打开如图文件 将xpack security enabled 和xpack security ht
  • elasticsearch的映射 (mapping)

    一 概念 映射 mapping 就是指定索引 index 里面的每个文档中的字段的类型 设置字段的存储和查询的分析策略 es对不同的字段类型 有不同的存储和检索策略 比如对于text类型的字段 会经过各类分词处理 大小写转换 同义词转换 才
  • ElasticSearch学习:ElasticSearch概述

    elasticsearch用于文本搜索的函数库Lucene ElasticSearch是基于此做的封装和增强 ElasticSearch 简称es es是一个开源的高拓展的分布式全文检索引擎 它可以近乎实施的存储 检索数据 本身扩展性很好
  • Elaticsearch安装越南语分词器

    1 目标 实现支持英 德 法 葡萄牙 西班牙 俄 印尼 泰 繁中 简中 日 韩 越南 意大利 阿拉伯 土耳其 乌克兰 荷兰 波兰 19种文字的分词器 2 自带的分词器 英 english 德 german 法 french 葡萄牙 port
  • elasticSearch常见的面试题

    常见的面试问题 描述使用场景 es集群架构3个节点 根据不同的服务创建不同的索引 根据日期和环境 平均每天递增60 2 大约60Gb的数据 调优技巧 原文参考 干货 BAT等一线大厂 Elasticsearch面试题解读 掘金 设计阶段的调
  • 03-信息收集

    信息搜集 全面了解系统 什么是信息收集 信息收集是指通过各种方式获取所需要的信息 信息收集是信息得以利用的第一步 也是关键的一步 信息收集工作的好坏 会影响整个渗透测试流程的进行 收集的信息越多后期可进行测试的目标就越多 信息收集包含资产收
  • elasticsearch简介与基本操作

    是什么等 废话后置 1 elasticsearch 分为3个部分 index mapping setting 1 1 index 相当于MySQL的表 elasticsearch 没有库的概念 也没有用户的权限区分概念 所以做好 备份 每个
  • Peewee

    Part1前言 在 Python 的 ORM 框架中 比较主流的有 Sqlalchemy peewee pony 等等 但是其中 peewee 和 Django 的 Models 框架很像 如果了解 Django 的同学肯定对 peewee
  • 常用搜索引擎使用技巧

    1 指定站内搜索 使用site指定在某网站内搜索 如只在知乎中搜索 liuwons liuwons site zhihu com 2 精确匹配 使用双引号来指定精确匹配单词或短语 如精确搜索 liuwons liuwons 3 模糊搜索 使
  • 英伟达狂卖50万台GPU!AI爆火背后,是显卡的争夺

    据市场跟踪公司Omdia的统计分析 英伟达在第三季度大约卖出了50万台H100和A100 GPU 此前 Omdia通过英伟达第二季度的销售额 估计其大概卖出了900吨GPU 大语言模型火爆的背后 英伟达建立起了强大的显卡帝国 在人工智能的大

随机推荐

  • 如何在 Ubuntu 18.04 上设置 WireGuard VPN

    WireGuard 是一种采用最先进加密技术的现代 VPN 虚拟专用网络 技术 与其他类似解决方案 例如 IPsec 和 相比OpenVPN WireGuard 更快 更容易配置且性能更高 它是跨平台的 几乎可以在任何地方运行 包括 Lin
  • Linux 中的 pkill 命令

    本文涵盖了 Linux 的基础知识pkill命令 pkill是一个命令行实用程序 它根据给定的条件向正在运行的程序的进程发送信号 可以通过进程的完整名称或部分名称 运行进程的用户或其他属性来指定进程 The pkill命令是的一部分proc
  • Linux 触摸命令

    touch 命令允许我们更新现有文件和目录的时间戳以及创建新的空文件 在本指南中 我们将通过实际示例和最常见命令选项的详细说明向您展示如何使用 touch 命令 Linux 文件时间戳 在讨论如何使用 touch 命令之前 我们首先回顾一下
  • 如何在 Ubuntu 上安装 Deb 文件(包)

    Deb 是所有基于 Debian 的发行版使用的安装包格式 Ubuntu 存储库包含数千个 deb 软件包 可以从 Ubuntu 软件中心或使用命令行安装apt and apt get公用事业 许多应用程序不包含在 Ubuntu 或任何第
  • 如何在 Ubuntu 20.04 上安装 Gradle

    Gradle 是一种通用工具 用于构建 自动化和交付软件 它主要用于 Java C 和 Swift 项目 Gradle 结合了 Ant 和Maven 与使用 XML 进行脚本编写的前辈不同 Gradle 使用Groovy 一种动态的 面向对
  • 在 CentOS 7 上安装 Odoo 11

    Odoo 是世界上最受欢迎的一体化商业软件 它提供一系列业务应用程序 包括 CRM 网站 电子商务 计费 会计 制造 仓库 项目管理 库存等等 所有这些都无缝集成 Odoo11 需要 Python 3 5 CentOS 存储库中不提供该版本
  • Linux安装jenv,灵活管理jdk(不同目录,采用不同的jdk)

    前文 总所周知 随着java版本的不断升级 jdk版本越来越高 但是互联网开发软件很多还维持在jdk1 8的时代 但是很多开源软件只至此java 11以上的版本 这就会导致很多程序上的不兼容或者报错 本文主要解决 linux不同目录下 采用
  • Linux下修改java.library.path

    第一步 打印出当前的java library path有哪些目录 执行 vi Test java 切换编辑模式 i 插入如下代码 public class Test public static void main String args S
  • Anaconda创建新环境,CondaHTTPError: HTTP 000 CONNECTION FAILED for url <http://mirrors.tuna.tsinghua问题解决过程

    两步即可 第一步 配置anaconda为清华源 在Anaconda Prompt终端依次执行这些命令 conda config add channels http mirrors tuna tsinghua edu cn anaconda
  • MQTT协议

    http www blogjava net yongboy category 54835 html
  • 树莓派的连接与AP局域网路由器配置

    文章目录 前言 1 树莓派的连接 1 1 本地连接 1 2 远程连接 2 AP路由器配置 2 1 配置无线局域网 2 2 配置以太网实现局域网 前言 树莓派的连接方式分为两种 本地和远程 也可以通俗的说是有本地设备还是就一台笔记本的情况 本
  • 解决:无法解析的外部符号__iob_func

    解决 无法解析的外部符号 iob func 原文 http blog csdn net hebbely article details 53780562 在使用 VS2015 下使用 libjpeg turbo 静态库 编译时报错了 cpp
  • 【用户增长】用户增长方法论及增长思维

    用户增长方法论及增长思维 1 什么是用户增长 1 1 用户增长的概念及内涵 用户增长不是简单的用户数量的增长 用户增长是一个系统化 综合化的体系 用户增长包含三个阶段的增长 综上三点 我们可以简单的将用户增长定义为 通过痛点 产品 渠道 创
  • 编写第一个Makefile(HelloWorld)

    什么是Makefile 讲makefie之前 先将将什么是make make是一个命令工具 是一个解释makefile中指令的命令工具 它可以简化编译过程里面所下达的指令 当执行 make 时 make 会在当前的目录下搜寻 Makefil
  • 建站系列(八)--- 本地开发环境搭建(WNMP)

    目录 相关系列文章 前言 一 准备工作 二 Nginx安装 三 MySQL安装 四 PHP安装及Nginx配置 五 总结 相关系列文章 建站系列 一 网站基本常识 建站系列 二 域名 IP地址 URL 端口详解 建站系列 三 网络协议 建站
  • ServletConfig对象

    目录 一 ServletConfig对象定义 二 ServletConfig对象作用 三 ServletConfig中的方法 一 ServletConfig对象定义 ServletConfig是什么 ServletConfig是一个接口 位
  • 3. 无重复字符的最长子串

    给定一个字符串 s 请你找出其中不含有重复字符的 最长子串 的长度 示例 1 输入 s abcabcbb 输出 3 解释 因为无重复字符的最长子串是 abc 所以其长度为 3 示例 2 输入 s bbbbb 输出 1 解释 因为无重复字符的
  • [转]iPhone多渠道自动打包Shell脚本介绍

    转 iPhone多渠道自动打包Shell脚本介绍 摘要 随着苹果手持设备用户的不断增加 ios应用也增长迅速 同时随着iphone被越狱越来越多的app 的渠道也不断增多 为各个渠道打包成了一件费时费力的工作 本文提供一种比较智能的打包方式
  • Java方法递归的简单例题

    目录 递归 1 递归求N 的阶乘和递归求1 2 3 4 n 2 按顺序打印一个数字的每一位 3 斐波那契数列和青蛙跳台阶问题 4 汉诺塔问题 递归 递归 简单来说 就是方法自己调用自己的过程 那要怎么样去实现递归呢 首先 我们需要去根据条件
  • 单页面(SPA)与服务端渲染(SSR),概念、区别,优缺点

    单页面 SPA 与服务端渲染 SSR 概念 区别 优缺点 什么是单页面应用 什么是多页面应用 二者有什么区别 1 单页面应用与多页面应用 单页面顾名思义就是整个应用只有一个Html页面 页面的切换其实是组件的切换 这样设计的好处就是不进行页