SPA, SEO, SSR总结

SPA单页面Web应用

SPA(Single page web application) 单页面Web应用

Web不再是一张张页面,而是一个整体的应用,一个由路由系统,数据系统,页面(组件)系统等等,组成的应用程序, 让用户不需要每次与服务器进行页面刷新来获得新的内容, 从而提供了更快,跟流畅的用户体验, 在SPA中, 所有的交互都在一个单独的页面中进行处理, 通常时index.html, 通过JavaScript和Ajax技术动态地加载内容和更新页面,同时使用前端路由管理页面的不同状态和页面之间的跳转。

SPA应用广泛用于对SEO要求不高的场景

SEO搜索引擎优化

SEO (Search Engine Optimization) 搜索引擎优化

通过各种技术(手段)来确保, 我们的Web内容被搜索引擎最大化收录,最大化提高权重,最终带来更多流量, 常见的SEO技术包括, 优化网站的关键词, 标题, 和描述, 改善网站的内部连接结构, 增加网站的页面访问速度, 提高网站的用户体验, 建立高质量的外部链接等

SSR服务端渲染

SSR (Server Side Render) 服务端渲染, 即网页是通过服务端渲染生成后输出给客户端

在SSR中, 前端分为两部分: 前端客户端, 前端服务端

                前端服务端, 用于发送AJAX, 获得数据

                前端客户端, 用于将AJAX数据和页面进行渲染, 渲染成HTML页面, 并相应给调用程序(浏览器,爬虫)

如果爬虫获得html页面, 就可以启动处理程序, 处理页面内容, 做种完成SEO操作

SPA和SSR对比

SPA单页应用程序SSR服务器端渲染
优势1.页面内容在客户端渲染 2. 只关注View层,与后台耦合度低,前后端分离 3.减轻后台渲染画面的压力1.更好的SEO,搜索引擎工具可以直接查看完全渲染的画面 2.更快的内容到达时间 (time-to-content),用户能更快的看到完整渲染的画面
劣势1.首屏加载缓慢 2.SEO(搜索引擎优化)不友好1.更多的服务器端负载 2.涉及构建设置和部署的更多要求,需要用Node.js渲染 3.开发条件有限制,一些生命周期将失效 4.一些常用的浏览器API无法使用

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

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

相关文章

参与创作①周年啦~

写在前面 今天看了消息才知道,原来开始创作已经一年了。此篇无干货,纯白话,纯记录。 机缘 参与CSDN创作已经一年有余,犹记得第一篇博文是为了整理好所学内容,方便自己复习。没想到后面也陆陆续续发了些其他内容&…

关于read函数阻塞的问题

关于read函数阻塞的问题 上一篇文章IO多路转接之select 末尾提到了一点,服务端读取每次是读取10个字节的,如果超过10个字节,需要读取多次,但是客户端只会read一次,第二次read的时候,直接阻塞了。 那么如何…

Windows server flask

1、Windows server 通过python的flask执行命令 from flask import Flask, request, abort import subprocess from flask_basicauth import BasicAuth app Flask(__name__) # 获取url是进行账号密码认证,设置url的账号密码 app.config[BASIC_AUTH_USERNAME] 账号…

12.8作业

1.头文件 #ifndef WIDGET_H #define WIDGET_H#include <QWidget> #include <QDebug> #include <QMovie>QT_BEGIN_NAMESPACE namespace Ui { class Widget; } QT_END_NAMESPACEclass Widget : public QWidget {Q_OBJECTpublic:Widget(QWidget *parent nul…

spring-boot-starter-validation是什么Validation参数校验使用概要

spring-boot-starter-validation是什么&Validation参数校验使用概要 来源Valid和Validated的用法(区别)引入依赖Valid和Validated的用法 在日常的项目开发中&#xff0c;为了防止非法参数对业务造成的影响&#xff0c;需要对接口的参数做合法性校验&#xff0c;例如在创建用…

基于Docker安装Mysql:5.5

一、拉取镜像 sudo docker pull mysql:5.5二、启动mysql镜像 1. 创建MySQL的conf目录和data目录 mkdir -p /home/docker/mysql/conf /home/docker/mysql/data2. 利用镜像创建容器 sudo docker run --restartalways -d --name mysql -v /home/docker/mysql/conf/my.cnf:/etc…

系统设计-微服务架构

典型的微服务架构图 下图展示了一个典型的微服务架构。 负载均衡器&#xff1a;它将传入流量分配到多个后端服务。CDN&#xff08;内容交付网络&#xff09;&#xff1a;CDN 是一组地理上分布的服务器&#xff0c;用于保存静态内容以实现更快的交付。客户端首先在 CDN 中查找内…

methods

类型&#xff1a;{ [key: string]: Function } 详细&#xff1a; methods 将被混入到 Vue 实例中。可以直接通过 VM 实例访问这些方法&#xff0c;或者在指令表达式中使用。方法中的 this 自动绑定为 Vue 实例。 注意&#xff0c;不应该使用箭头函数来定义 method 函数 (例如…

临床骨科常用的肩关节疾病量表,医生必备!

根据骨科医生的量表使用情况&#xff0c;常笑医学整理了临床骨科常用的肩关节疾病量表&#xff0c;为大家分享临床常见的肩关节疾病量表评估内容&#xff0c;均支持量表下载和在线使用&#xff0c;建议收藏&#xff01; 1.臂、肩、手功能障碍&#xff08;disabilites of the ar…

useradd 在Linux原生应用开发过程中的简单应用

useradd命令是用于在Linux系统中创建新用户的命令。它可以创建一个新用户&#xff0c;并设置该用户的属性、家目录、默认shell等。useradd命令实际上是一个包装了一系列系统调用的高级命令。 在Linux系统中&#xff0c;用户信息存储在/etc/passwd文件中。当执行useradd命令时&…

flstudio21破解汉化版2024最新水果编曲使用教程

​ 如果你一直梦想制作自己的音乐(无论是作为一名制作人还是艺术家)&#xff0c;你可能会想你出生在这个时代是你的幸运星。这个水果圈工作室和上一版之间的改进水平确实令人钦佩。这仅仅是FL Studio 21所提供的皮毛。你的音乐项目的选择真的会让你大吃一惊。你以前从未有过这…

ChatGPT的常识

什么是ChatGPT&#xff1f; ChatGPT是一个基于GPT模型的聊天机器人&#xff0c;GPT即“Generative Pre-training Transformer”&#xff0c;是一种预训练的语言模型。ChatGPT使用GPT-2和GPT-3两种模型来生成自然语言响应&#xff0c;从而与人类进行真实的对话。 ChatGPT的设计…

2023年全球软件开发大会(QCon广州站2023)-核心PPT资料下载

一、峰会简介 本次峰会包含&#xff1a;泛娱乐时代的边缘计算与通讯、稳定性即生命线、下一代软件架构、出海的思考、现代数据架构、AGI 与 AIGC 落地、大前端技术探索、编程语言实战、DevOps vs 平台工程、新型数据库、AIGC 浪潮下的企业出海、AIGC 浪潮下的效能智能化、数据…

【池式组件】线程池的原理与实现

线程池的原理与实现 线程池简介1.线程池1.线程池2.数量固定的原因3.线程数量如何确定4.为什么需要线程池5.线程池结构 线程池的实现数据结构设计1.任务结构2.任务队列结构3.线程池结构 接口设计 线程池的应用reactorredis 中线程池skynet 中线程池 线程池简介 1.线程池 1.线程…

第7课 SQL入门之创建计算字段

文章目录 7.1 计算字段7.2 拼接字段使用别名 7.3 执行算术计算 这一课介绍什么是计算字段&#xff0c;如何创建计算字段&#xff0c;以及如何从应用程序中使用别名引用它们。 7.1 计算字段 存储在数据库表中的数据一般不是应用程序所需要的格式&#xff0c;下面举几个例子。 …

前端Excel导出实用方案(完整源码,可直接应用)

目录 前言&#xff1a; 技术选型&#xff1a; 主要功能点&#xff1a; 核心代码&#xff1a; 完整代码&#xff1a; 开发文档 前言&#xff1a; 在前后端分离开发为主流的时代&#xff0c;很多时候&#xff0c;excel导出已不再由后端主导&#xff0c;而是把导出的操作移…

关于锁的粒度问题——面试

锁的粒度划分主要有三种&#xff1a;表级锁、页级锁和行锁 1.表级锁&#xff1a; 对整张表加锁&#xff0c;粒度最大&#xff0c;加锁的并发度最低&#xff0c;会导致其他事务无法访问该表&#xff0c;只有当前事务提交或者回滚后才能释放锁。表级锁适用于对表进行全表操作的场…

DeepIn,UOS统信专业版安装运行Java,JavaFx程序

因为要适配国产统信UOS系统&#xff0c;要求JavaFx程序能简便双击运行&#xff0c;由于网上UOS开发相关文章少&#xff0c;多数文章没用&#xff0c;因此花了不少时间&#xff0c;踩了不少坑&#xff0c;下面记录一些遇到的问题&#xff0c;我的程序环境是jdk1.8&#xff0c;为…

【K8s】Kubernetes CRD 介绍(控制器)

文章目录 CRD 概述1. 操作CRD1.1 创建 CRD1.2 操作 CRD 2. 其他笔记2.1 Kubectl 发现机制2.2 校验 CR2.3 简称和属性 3. 架构设计3.1 控制器概览 参考 CRD 概述 CR&#xff08;Custom Resource&#xff09;其实就是在 Kubernetes 中定义一个自己的资源类型&#xff0c;是一个具…

如何为 3D 模型制作纹理的最佳方法

在线工具推荐&#xff1a; 3D数字孪生场景编辑器 - GLTF/GLB材质纹理编辑器 - 3D模型在线转换 - Three.js AI自动纹理开发包 - YOLO 虚幻合成数据生成器 - 三维模型预览图生成器 - 3D模型语义搜索引擎 您可以通过不同的方式为 3D 模型创建 3D 纹理。下面我们将介绍为 3D …