SPA和SSR

单页面应用程序(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.rhkb.cn/news/461768.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【 纷享销客-注册安全分析报告-无验证方式导致安全隐患】

前言 由于网站注册入口容易被黑客攻击&#xff0c;存在如下安全问题&#xff1a; 1. 暴力破解密码&#xff0c;造成用户信息泄露 2. 短信盗刷的安全问题&#xff0c;影响业务及导致用户投诉 3. 带来经济损失&#xff0c;尤其是后付费客户&#xff0c;风险巨大&#xff0c;造…

基于SpringBoot和PostGIS的世界各国邻国可视化实践

目录 前言 一、空间数据查询基础 1、空间数据库基础 2、空间相邻查询 二、SpringBoot后台功能设计 1、后台查询接口的实现 2、业务接口设计 三、Leaflet进行WebGIS开发 1、整体结构介绍 2、相邻国家展示可视化 四、成果展示 1、印度及其邻国 2、乌克兰及其邻国 3、…

Python之groupby()及aggregate()方法

目录 数据准备df.describe()思考1 分组 pd.groupby()思考2 df.aggregate()思考1 现在有一份titanic_train.csv&#xff0c;包含泰坦尼克号乘客信息及获救情况的明细数据&#xff0c;我们需要使用一些聚合函数&#xff0c;统计相关指标。 数据准备 import pandas as pd df pd.…

Unity 二次元三渲二

三渲二 注意&#xff1a;Unity必须是2022.3LTS及以上和URP项目&#xff01;&#xff01;&#xff01; 下载三渲二插件 【如何将原神的角色导入Unity】全网最细致教程&#xff0c;全程干货。不使用任何收费插件&#xff0c;使用Spring Bone对头发和衣服进行物理模拟。_原神 步…

Unity计算二维向量夹角余弦值和正弦值的优化方法参考

如果不考虑优化问题&#xff0c;计算两个向量的余弦值或者正弦值可以直接使用类似的方法&#xff1a; [SerializeField] Vector2 v1, v2;void Start() {float valCos Mathf.Acos(Vector2.SignedAngle(v1, v2));float valSin Mathf.Asin(Vector2.SignedAngle(v1, v2)); } 但是…

深度|谁在为OpenAI和Anthropic的AI编程竞赛提供“军火”?已赚得盆满钵满

图片来源&#xff1a;Unsplash AI 开发者之所以一致认为编程的重要性&#xff0c;是有原因的&#xff1a;大型语言模型编程能力越强&#xff0c;它回答与软件无关的其他类型问题的能力也越强。 去年秋天&#xff0c;几位 Google 人工智能领导者与初创公司 CEO Jonathan Siddh…

2024年北京市安全员-A证证模拟考试题库及北京市安全员-A证理论考试试题

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 2024年北京市安全员-A证证模拟考试题库及北京市安全员-A证理论考试试题是由安全生产模拟考试一点通提供&#xff0c;北京市安全员-A证证模拟考试题库是根据北京市安全员-A证最新版教材&#xff0c;北京市安全员-A证大…

[ 问题解决篇 ] win11中本地组策略编辑器gpedit.msc打不开(gpedit.msc缺失)

&#x1f36c; 博主介绍 &#x1f468;‍&#x1f393; 博主介绍&#xff1a;大家好&#xff0c;我是 _PowerShell &#xff0c;很高兴认识大家~ ✨主攻领域&#xff1a;【渗透领域】【数据通信】 【通讯安全】 【web安全】【面试分析】 &#x1f389;点赞➕评论➕收藏 养成习…

前端聊天室页面开发(赛博朋克科技风,内含源码)

肝了一天&#xff0c;经过各种处理美化&#xff0c;肝出来了一个赛博朋克科技风的前端页面&#xff0c;用的原生三件套htmlcssjavascript开发的&#xff0c;本来想是加点功能调用一下gpt接口&#xff0c;但是基本都需要webscoket通信&#xff0c;可惜我js学的不是很深入&#x…

TMDOG的Gin学习笔记_01——初识Gin框架

TMDOG的Gin学习笔记_01——初识Gin框架 博客地址&#xff1a;[TMDOG的博客](https://blog.tmdog114514.icu) 作者自述&#xff1a; 停更太久了&#xff0c;是因为开学了课太多了&#xff0c;并且我一直在准备上篇文章的内容正在coding&#xff0c;就先搁置了更新博客QAQ&…

wsl2.0(windows linux子系统)使用流程

1.什么是wsl wsl指的是windows的linux子系统&#xff0c;最初是wsl1.0&#xff0c;靠windows内核来模拟linux内核&#xff0c;并不运行真正的linux内核&#xff0c;所以有时会有兼容性的问题。 而wsl2.0是基于windows自带的虚拟机功能hyper-v的&#xff0c;它会把设备上的每个…

计算机网络:网络层 —— IPv4 数据报的首部格式

文章目录 IPv4数据报的首部格式IPv4数据报分片生存时间 TTL字段协议字段首部检验和字段 IPv4数据报的首部格式 IPv4 数据报的首部格式及其内容是实现 IPv4 协议各种功能的基础。 在 TCP/IP 标准中&#xff0c;各种数据格式常常以32比特(即4字节)为单位来描述 固定部分&#x…

vue3学习记录-nextTick

vue3学习记录-nextTick 1. 案例场景2. 使用方法2.1 回调方式2.2 async&#xff0c;await 3.原理 1. 案例场景 聊天框实现输入内容&#xff0c;滚动条默认滚到最底部。 <template><div class"chat_box"><div class"chat_list" ref"chat…

Facebook群控策略详解

Facebook群控早在前几年就很火爆了&#xff0c;对于做Facebook营销或者电商的跨境选手来说&#xff0c;这是个不错的提高效率扩大增长的办法。具体来说&#xff0c;Facebook群控是一种通过同时管理多个Facebook账户进行自动化推广活动的方法&#xff0c;它可以实现自动发布帖子…

【私聊记录】最近在忙什么啊?听说你在学人工智能?

小舒&#xff1a;哎&#xff0c;你最近在忙什么啊&#xff1f; 小元&#xff1a;我在学习人工智能呢。 小舒&#xff1a;人工智能&#xff1f;难不难学啊&#xff1f; 小元&#xff1a;不难&#xff0c;找到正确的学习姿势就不难了&#xff01; 小舒&#xff1a;那你为什么想学…

BLE 协议之 L2CAP

目录 一、简介二、L2CAP Protocol 架构1、逻辑信道划分2、信道模式3、设计思想4、帧结构4.1 面向连接信道 B-frame4.2 无连接数据信道包 G-frame4.3 重传/流量控制/流传输模式下的面向连接的信道 S-frame、I-frame4.4 面向连接的通道分为 LE 信用流控模式和增强型信用流控模式 …

『 Linux 』网络传输层 - TCP(二)

文章目录 TCP六个标志位TCP的连接三次握手 四次挥手为什么是三次握手和四次挥手 重传机制 TCP六个标志位 在TCP协议报文的报头中存在一个用于标志TCP报文类型的标志位(不考虑保留标志位),这些标志位以比特位选项的方式存在,即对应标志位为0则表示为假,对应标志位为1则为真; SYN…

安科瑞AMB400分布式光纤测温系统解决方案--远程监控、预警,预防电气火灾

安科瑞戴婷 可找我Acrel-Fanny 安科瑞AMB400电缆分布式光纤测温具有多方面的特点和优势&#xff1a; 工作原理&#xff1a; 基于拉曼散射效应。激光器产生大功率的光脉冲&#xff0c;光在光纤中传播时会产生散射。携带有温度信息的拉曼散射光返回光路耦合器&#xff0c;耦…

Raspberry Pi 树莓派产品系列说明

系列文章目录 前言 随着我们产品线的不断扩展&#xff0c;要了解所有不同的 Raspberry Pi 板可能会让人感到困惑。以下是 Raspberry Pi 型号的高级分类&#xff0c;包括我们的旗舰系列、Zero 系列、计算模块系列和 Pico 微控制器。 Raspberry Pi 电脑分为几个不同的系列&#x…

电阻电容电感为什么通常是10、22、47这些数

电阻电容电感为什么通常是10、22、47这些数 优先数的来源优先数的优点&#xff1a;E24和E96的来源 我们在选择电阻时&#xff0c;经常看到的阻值是33Ohm&#xff0c;4.7KOhm&#xff0c;1KOhm&#xff0c;680Ohm.基本上是以这几个数字开头。 同时在选择电容时&#xff0c;经常看…