vue学习笔记(三)

1.vue开发存在SEO问题

前端开发采用vue开发后是单页面

单页面里面,前后端分离,渲染过程是js写的,在js调用接口返回数据之前,页面已经被打开了

实际上就是空白页面,这个时候右键点击查看源代码,实际上是都看不到内容的

对SEO不太有好

【最新的谷歌蜘蛛好像可以爬取到这种页面的数据。但是百度还是不行】


2.如何解决SEO问题

SEO主要是三点:

  • 多页面
  • 可配置title,关键词和描述(这里的title,关键词,描述还可能还动态的)
  • 页面要有内容

解决上述单页面SEO存在的问题有几种解决思路:


2.1前后端不分离


前后端不分离 不存在接口调用,一调用就是返回的页面,浏览器直接渲染
一出来就是整个页面一起出来

压力再后端

优点是安全性,不对外暴露接口

2.2前后端分离

这种时候压力都是在前端

2.2.1.预渲染

压力在客户端

现在比较流行的是prerender技术

打包的时候就将数据获取到 。
在html页面加载之前数据过来渲染后才有html的dom结构,这样的话可能会存在页面空白的情况。

 

缺点就是:

每次都要配置路由,页面多的话,配置麻烦,无法实现动态路由

页面变化都要重新打包

如果title关键词描述等来源于接口,配置到meta-info也无法实现(有其他变通方法,需引入其他技术)

优点:

能解决多页面问题,不像vue只能打包出一个index.html文件

2.2.2.服务端渲染

压力也是在客户端

这里说的“服务端渲染”实际是前端的服务端nodejs

原理相当于是起了2个服务
一个是后端的业务服务,一个是nodejs的服务

 这个相当于是重构之前的代码

适用场景是所有页面都要做SEO

采用unxtjs进行改造

这个改造还是挺大的

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

前端学习——Vue (Day2)

指令补充 指令修饰符 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><meta name"viewport" content"widthdevi…

两天学会用Webpack打包前端代码-day01

(创作不易&#xff0c;感谢有你&#xff0c;你的支持&#xff0c;就是我前行的最大动力&#xff0c;如果看完对你有帮助&#xff0c;请留下您的足迹&#xff09; 目录 什么是 Webpack&#xff1f; 使用 Webpack 体验webpack打包过程 修改 Webpack 打包入口和出口 入口 出…

vue3+taro+Nutui 开发小程序(一)

前言&#xff1a;最近在调研开发小程序&#xff0c;发现现在taro框架逐渐成熟&#xff0c;能完美地使用vue3来进行开发&#xff0c;调研中发现京东的Nutui也不错所以准备写一个由0到1的vue3taroNutui的小程序。 这篇我们首先搭建一个框架&#xff1a; vscode插件准备环节&…

Sublime Text 4 激活教程(Windows+Mac)

下载安装 官网 https://www.sublimetext.com 点击跳转 2023.7.21 版本为4143 Windows激活方式 一、激活License方式 入口在菜单栏中"Help” -> “Enter License” 注意格式&#xff0c;可能会过期失效&#xff0c;失效就用方式二 Mifeng User Single User License E…

F.interpolate 数组采样操作

功能&#xff1a;利用插值方法&#xff0c;对输入的张量数组进行上\下采样操作&#xff0c;换句话说就是科学合理地改变数组的尺寸大小&#xff0c;尽量保持数据完整。 在计算机视觉中&#xff0c;interpolate函数常用于图像的放大(即上采样操作)。比如在细粒度识别领域中&…

《Unix环境高级编程》第三版源代码编译

CentOS 7.6 进行编译 使用cat /etc/redhat-release看到操作系统是CentOS Linux release 7.6.1810 (Core)&#xff0c;使用uname -r看到内核是3.10.0-957.el7.x86_64&#xff0c;gcc --version可以看到gcc版本是4.8.5。 wget http://www.apuebook.com/src.3e.tar.gz下载《Uni…

java学习路程之篇一、进阶知识、面向对象高级、static关键字、继承、final关键字、this、super

文章目录 1、面向对象高级2、static关键字3、继承4、final关键字 1、面向对象高级 2、static关键字 3、继承 4、final关键字

MyBatis学习笔记——4

MyBatis学习笔记——4 一、MyBatis的高级映射及延迟加载1.1、多对一1.1.1、第一种方式&#xff1a;级联属性映射1.1.2、第二种方式&#xff1a;association1.1.3、第三种方式&#xff1a;分步查询 1.2、一对多1.2.1、第一种方式&#xff1a;collection1.2.1、第二种方式&#x…

【OAuth2】OAuth2概述及使用GitHub登录第三方网站

【OAuth2】OAuth2概述及使用GitHub登录第三方网站 文章目录 【OAuth2】OAuth2概述及使用GitHub登录第三方网站0. 导言1. OAuth2 简介2. OAuth2 认证授权总体流程3. OAuth2 标准接口4. OAuth2 四种授权模式4.1 授权码模式4.2 简化模式4.3 密码模式4.4 客户端模式 5. GitHub授权登…

Docker 的数据管理、容器互联、镜像创建

目录 一、数据管理 1.数据卷 2. 数据卷容器 二、容器互联&#xff08;使用centos镜像&#xff09; 三、Docker 镜像的创建 1.基于现有镜像创建 1.1首先启动一个镜像&#xff0c;在容器里修改 1.2将修改后的容器提交为新的镜像&#xff0c;需使用该容器的id号创建新镜像 …

电脑显示连接上WiFi,但没办法上网

问题: 电脑显示已经连接上WiFi。但是百度不出来东西&#xff0c;也没办法打开任何网页。 解决方法&#xff1a; win10系统 在左下角搜索栏&#xff0c;搜索“代理服务器设置”。 找到手动设置代理 —》关闭“使用代理服务” 【默认是打开的】 关闭之后即可上网~~

【Git】分支合并冲突产生与解决

文章学习自&#xff1a;麦兜搞IT&#xff0c;如有侵权&#xff0c;告知删除 文章目录 前言1 Fast Forword 合并1.1 核心原理1.2 举个栗子1.3 经验之谈 2 three way merge2.1 核心原理2.2 举个栗子&#xff08;不带冲突&#xff09;2.3 带冲突的three way merge 3 变基rebase3.…

Android WiFi框架概览

概览 Android 提供默认 Android 框架实现&#xff0c;其中包括对各种 WLAN 协议和模式的支持&#xff0c;这些协议和模式包括&#xff1a; WLAN 基础架构 (STA)网络共享模式或仅限本地模式下的 WLAN 热点 (Soft AP)WLAN 直连&#xff08;点对点&#xff09;WLAN 感知 (NAN)WL…

【简单认识MySQL主从复制与读写分离】

文章目录 一、MySQL主从复制1、配置主从复制的原因&#xff1a;2、主从复制原理1、 MySQL的复制类型2、 MySQL主从复制的工作过程;1、 MySQL主从复制延迟2、优化方案&#xff1a;3、 MySQL 有几种同步方式&#xff1a; 三种4、异步复制&#xff08;Async Replication&#xff0…

Stream流List转Map报错Duplicate key StreamMap

项目场景&#xff1a; JDK8引入了Stream流&#xff0c;让程序员在开发中更方便进行集合之间的转换&#xff0c;在使用Stream流将List转为Map时&#xff0c;如果Map的key有重复的情况下&#xff0c;就会抛出java.lang.IllegalStateException: Duplicate key StreamMap这个异常。…

算法竞赛备赛之经典数据结构训练提升,暑期集训营培训

1.链表与邻接表&#xff1a;树与图的存储 我们将结构体和指针结合来实现链表 struct Node {int val;Node * next; }; ​ new Node;//这样创建结点是相当慢的 我们算法主要是用数组来模拟链表&#xff0c;这样效率会高一些。 数组模拟单链表 邻接表&#xff1a;存储图和树 实…

KubeVela篇06:Kubevela Addon插件安装原理

addon支持从本地、git仓库、helm chart仓库安装,最终原理都相同,因此我们以本地安装为例。 完整流程如下: 从指定目录读取一个完整的addon安装包。 根据metadata.yaml配置文件,校验插件要求的kubevela、k8s的版本,不满足版本要求则终止安装。 根据metadata.yaml配置文件…

深入理解 PostgreSQL 的架构和内部工作原理

&#x1f337;&#x1f341; 博主 libin9iOak带您 Go to New World.✨&#x1f341; &#x1f984; 个人主页——libin9iOak的博客&#x1f390; &#x1f433; 《面试题大全》 文章图文并茂&#x1f995;生动形象&#x1f996;简单易学&#xff01;欢迎大家来踩踩~&#x1f33…

FPGA配置文件从串并模式下载

FPGA配置文件的下载模式有5种&#xff1a; 主串模式&#xff08;master serial&#xff09;从串模式&#xff08;slave serial&#xff09;主并模式&#xff08;master selectMAP&#xff09;从并模式&#xff08;slave selectMAP&#xff09;JTAG模式 其中&#xff0c;JTAG模…

信捷PLC RC低通滤波器(C语言实现)

PLC信号处理系列之RC低通滤波器算法详细介绍请参考下面文章: PLC信号处理系列之一阶低通(RC)滤波器算法_plc滤波算法程序_RXXW_Dor的博客-CSDN博客1、先看看RC滤波的优缺点 优点:采用数字滤波算法来实现动态的RC滤波,则能很好的克服模拟滤波器的缺点; 1、在模拟常数要求较…