SPA和SSR

news2024/11/23 22:17:59

单页面应用程序(SPA)

单页面应用(SPA)全称是:Single-page application, SPA应用是在客户端呈现的(术语称:CRS)。

  • SPA应用默认只返回一个空HTML页面,如:body只有<div id="app"></div>
  • 而整个应用程序的内容都是通过JavaScript动态加载,包括应用程序的逻辑、UI以及与服务器通信相关的所有数据。
  • 构建SPA应用常见的库和框架有:React、Vue、AngularJS等

客户端渲染原理

SPA的优点:

  • 只需要加载一次
    • SPA应用程序只需要在第一次请求时加载页面,页面切换不需要重新加载,而传统的Web应用程序必须在每次请求时都得加载页面,需要花费更多时间,因此,SPA页面加载速度要比传统Web应用程序更快。
  • 更好的用户体验
    • SPA提供类似于桌面或移动应用程序的体验,用户切换页面不必重新加载页面
      • 切换页面只是内容发生了变化,页面并没有重新加载,从而使体验更加流畅
  • 可轻松的构建功能丰富的Web应用程序

SPA的缺点

  • SPA应用默认只返回一个空HTML页面,不利于SEO
  • 首屏加载的资源过大时,一样会影响首屏的渲染
  • 也不利于构建复杂的项目,复杂的Web应用程序的大文件可能变得难以维护

爬虫-工作流程

Google爬虫工作流程分为3个阶段,并非每个网页都会经历这3个阶段:

  • 抓取

    • 爬虫(也称蜘蛛),从互联网发现各类网页,网页中的外部链接也会被发现
    • 爬取数以十亿被发现的网页的内容,如:文本,图片和视频
  • 索引编制

    • 爬虫程序会分析网页上的文本、图片和视频文件
    • 并将信息存储在大型数据库(索引区)中
      • 例如<title>元素和Alt属性,图片,视频等
      • 爬虫会对内容类似的网页归类分组
      • 不符合规则内容和网站会被清理
        • 如:禁止访问 或 需要权限的网站等等
  • 呈现搜索结果

    • 当用户在Google中搜索时,搜索引擎会根据内容的类型,选择一组网页中最具代表性的网页进行呈现

搜索引擎的优化(SEO)

  • 语义性HTML标记
    • 标题用<h1>,一个页面只有一个;副标题用<h2>到<h6>
    • 不过不要过渡使用h标签,多次使用不会增加SEO
    • 段落用<p>,列表用<ul>,并且li只放在ul中等等
  • 每个页面需要包含标题+内部链接
    • 每个页面对应的title,同一网站所有页面都有内链可以指向首页
  • 确保链接可供抓取,如图:
  • mete标签优化,设置description,keyword等
  • 文本标记和img
    • 比如<b>和<strong>加粗文本标签,爬虫也会关注到改内容
    • img标签增加alt属性,图片加载失败,爬虫会取alt内容
  • robots.txt文件:规定爬虫可以访问您网站上的那些网站
  • sitemap.xml站点地图:在站点地图列出所有网页,确保爬虫不会漏掉某些网页

静态站点生成(SSG)

  • 静态站点生成(SSG)全称时:Static Site Generate 是预先生成好的静态网站
    • SSG应用一般在构建阶段就确定了网站的内容
    • 如果网站的内容需要更新了,那么必须重新再次构建和部署
    • 构建SSG应用常见的库和框架有:Vue Nuxt、React Next.js等
  • SSG的优点
    • 访问速度非常快,因为每个页面都是在构建阶段就已经提前生成好的
    • 直接给浏览器返回静态的HTML,也有利于SEO
    • SSG应用依然保留了SPA应用的特性,比如:前端路由,响应式数据,虚拟dom等
  • SSG的缺点
    • 页面都是静态的,不利于展示实时性的内容,实时性的更适合SSR
    • 如果站点内更新了,那么必须得重新再次构建和部署

服务器端渲染(SSR)

  • 服务器端渲染全称是:Server Side Render 在服务器端渲染页面,并将渲染好的HTML返回给浏览器呈现
    • SSR应用得页面是在服务器端渲的,用户每请求一个SSR页面都会现在服务器端进行渲染,然后将渲染好的页面,返回给浏览器
    • 构建SSR应用常见的库和框架有:Vue Nuxt、React Next.js等(SSR应用也称同构应用)
  • 服务器端渲染原理

SSR优缺点

  • SSR的优点
    • 更快的首屏渲染速度
      • 当浏览器显示静态页面的内容要比JavaScript动态生成的内容快得多
      • 当用户访问首页时可立即返回静态页面内容,而不是等待浏览器先加载完整个应用程序
    • 更好的SEO
      • 爬虫时最擅长爬取静态的HTML页面,服务器直接返回一个静态的HTML给浏览器
      • 这样有利于爬虫快速爬取网页内容,并输入索引,有利于SEO
    • SSR应用程序在Hydration之后依然可以保留Web应用程序的交互性,比如:前端路由,响应式数据,虚拟DOM等
  • SSR的缺点
    • SSR通常需要对服务器进行更多的API调用,以及在服务器端渲染需要消耗更多的服务器资源,成本高
    • 增加了一定的开发成本,用户需要关心哪些代码时运行在服务器端,哪些代码是运行在浏览器端
    • SSR配置站点和缓存通常会比SPA站点要复杂一点

SSR解决方案

  • 方案一:php,jsp...
  • 方案二:从零搭建SSR项目(Node+Webpack+Vue/React)
  • 方案三:直接使用流行的框架(推荐)
    • React:Next.js
    • Vue3:Nuxt3 || Vue2:Nuxt.js
    • Angular:Angular Universal
  • SSR应用场景非常广阔,比如
    • SaaS产品: 电子邮件网站、在线游戏、客户关系管理系统(CRM)、采购系统等
    • 门户网站、电子商务、零售网站、
    • 单个页面,静态网站,文档类网站
    • 等等

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2230796.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

初始JavaEE篇——多线程(4):wait、notify,饿汉模式,懒汉模式,指令重排序

找往期文章包括但不限于本期文章中不懂的知识点&#xff1a; 个人主页&#xff1a;我要学编程(ಥ_ಥ)-CSDN博客 所属专栏&#xff1a;JavaEE 目录 wait、notify 方法 多线程练习 单例模式 饿汉模式 懒汉模式 指令重排序 wait、notify 方法 wait 和 我们前面学习的sleep…

MySQL-基础汇总

MySQL-基础汇总 数据库对于任何一个从事后台开发的人说都是永远躲不掉的&#xff0c;任何系统或程序离开了数据的支持都变的毫无意义。而管理数据的工具——数据库就显得尤为重要。本章节我们的核心就是 MySQL&#xff0c;相信很多小伙伴跟我一样&#xff0c;也沉浸在增、删、…

【AD】1-2 AD24软件的中英文版本切换

1.如图设置软件后&#xff0c;关闭软件重新打开。如果想要切换回英文&#xff0c;将③勾选去掉&#xff0c;关闭软件重新在打开即可。

CSS、Less、Scss

CSS、Less和SCSS都是用于描述网页外观的样式表语言&#xff0c;但它们各自具有不同的特点和功能。以下是对这三者的详细阐述及区别对比&#xff1a; 详细阐述 CSS&#xff08;Cascading Style Sheets&#xff09; 定义&#xff1a;CSS是一种用来表现HTML或XML等文件样式的计算机…

【Python项目管理】“无法创建虚拟环境”报错原因及解决方法

一、问题说明 笔者最近在做一个python项目&#xff08;使用pycharm IDE&#xff09;&#xff0c;在添加python解释器时&#xff0c;提示无法创建虚拟环境&#xff08;Unable to create virtual environment&#xff09;&#xff0c;如下2图所示&#xff1a; 【添加python解释…

【实践】某央企研究院如何打造IT监控告警平台?

01客户简介&#xff1a; 案例客户为某央企下属研究院。 02痛点分析&#xff1a; 随着信创国产化持续推进&#xff0c;案例客户已完成部分IT核心系统的替代&#xff0c;部署了一系列国产软硬件设施&#xff0c;如Kylinv10操作系统、融智通网络设备等。由于信创生态不够成熟&a…

qt QBrush详解

1、概述 QBrush是Qt框架中的一个基本图形对象类&#xff0c;它主要用于定义图形的填充模式。QBrush可以用于填充如矩形、椭圆形、多边形等形状&#xff0c;也可以用于绘制背景等。通过QBrush&#xff0c;可以设置填充的颜色、样式&#xff08;如实心、渐变、纹理等&#xff09…

0-1规划的求解

实验类型&#xff1a;◆验证性实验 ◇综合性实验 ◇设计性实验 实验目的&#xff1a;学会使用Matlab编程实现求解0-1规划。 实验内容&#xff1a;1.学习使用Matlab定义子函数的命令function&#xff1b; 2.编程求解0-1型整数规划的枚举法或隐枚举法。 例1&#xff1a;求…

禾川HCQ1控制器程序编译报错如何解决

1、第一次打开用户程序 2、提示库未安装 3、安装库文件 4、脉冲轴库未安装 5、没有错误 去禾川自动化官网,把可以安装的包和库都安装下,程序编译就没有错误了。 6、下载相关包文件

C++进阶-->AVL树的实现

1. AVL树的介绍 1、AVL树的名字来源于他的发明者G. M. Adelson-Velsky和E. M. Landis两个前苏联的科学家&#xff0c;他们名字首元素组成。 2、AVL树就是我们前面二叉搜索树实现的时候提到的平衡二叉搜索树即二叉搜索树的左右孩子都是AVL树&#xff0c;即左右子树的高度差的绝…

【网络安全】|nessus使用

1、扫描结果分析&#xff1a; Sev&#xff1a;漏洞的严重性级别 CVSS&#xff1a;量化漏洞严重性的标准&#xff0c;通过计算得出一个分数&#xff0c;分数越高表示漏洞越严重。 VPR&#xff1a;基于风险的评分系统&#xff0c;帮助组织优先处理风险最高的漏洞。 EPSS&#xf…

P2-5【C语言基本数据类型、运算符和表达式】第五节-知识要点:格式输出函数printf()

讲解视频&#xff1a; P2-5【C语言基本数据类型、运算符和表达式】第五节-知识要点&#xff1a;格式输出函数printf() 知识要点&#xff1a;格式输出函数printf()。 一、任务分析 已知三角形三边a&#xff0c;b&#xff0c;c的值&#xff0c;求三角形的面积。要求输出a&#…

RFID资产管理

随着物联网和智能制造的发展&#xff0c;RFID资产管理逐渐成为企业提升运营效率的重要工具。利用RFID技术&#xff0c;企业能够实时跟踪和管理各种固定资产&#xff0c;从而提高资产利用率&#xff0c;降低运营成本。在现代化的管理体系中&#xff0c;RFID资产管理不仅限于资产…

Vue2——单页应用程序路由的使用

一.单页应用程序与多页应用程序之间的比较 二.单页的应用场景 系统类网站 / 内部网站 / 文档类网站 / 移动端网站 三.路由的介绍 1. 什么是路由 路由是一种映射关系 2. Vue中的路由是什么 路径和组件的映射关系 四.VueRouter的使用 5个基础步骤&#xff08;固定&#xff09; …

苹果ipa上架apple store 遇到的问题汇总已经解决方案!

大家伙&#xff0c;我是小黄。 最近在将ipa上架到apple store的时候遇到了一些问题&#xff0c;经过很长时间的摸索和修改终于成功上架了&#xff0c;下面是我遇到的问题和解决过程&#xff0c;希望可以帮助到大家。 一&#xff1a; Guideline 1.3 - Safety - Kids Category …

数据库三范式(1NF、2NF、3NF)

1NF&#xff08;第一范式&#xff09; 定义&#xff1a;确保每一列都是原子值&#xff0c;即是不可分割的基础数据项。 所谓第一范式&#xff08;1NF&#xff09;是指在关系模型中&#xff0c;对于添加列的一个规范要求&#xff0c;所有的列都 应该是原子性的&#xff0c;即数…

亚马逊CEO安迪·贾西(Andy Jassy)近日透露,Alexa助手即将迎来一次重大升级,具备“代理性”功能

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗&#xff1f;订阅我们的简报&#xff0c;深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同&#xff0c;从行业内部的深度分析和实用指南中受益。不要错过这个机会&#xff0c;成为AI领…

ts:函数的重载

ts&#xff1a;函数的重载 1 主要内容说明2 例子2.1 函数的重载2.1.1 源码1 &#xff08;函数的重载&#xff09;2.1.2 源码1运行效果 3.结语4.定位日期 1 主要内容说明 重载函数可以提高类型安全性&#xff0c;内容灵活性和可读性。重载允许同一个函数定义多个参数类型的数量…

qt QTabWidget详解

1、概述 QTabWidget是Qt框架中的一个控件&#xff0c;它提供了一个标签页式的界面&#xff0c;允许用户在不同的页面&#xff08;或称为标签&#xff09;之间切换。每个页面都可以包含不同的内容&#xff0c;如文本、图像、按钮或其他小部件。QTabWidget非常适合用于创建具有多…

telnet 密码模式 访问路由器

telnet 密码访问华为路由器 模拟被访问路由 sy [Huawei]int g0/0/0 //选中 g0/0/0端口 [Huawei-GigabitEthernet0/0/0]ip add 192.168.1.1 24 //设置端口ip [Huawei]user-interface vty 0 4 //配置vty [Huawei-ui-vty0-4]set authentication password cipher huawei123 //设置…