我们一起做过的SPA——Nuxt.js介绍

Nuxt.js

1 我们一起做过的SPA

  • SPA(single page web application)单页 Web 应用,Web 不再是一张张页面,而是一个整体的应用,一个由路由系统、数据系统、页面(组件)系统等等,组成的应用程序。

  • 我们之前学习的Vue就是SPA中的佼佼者。

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

    在这里插入图片描述

2 什么是SEO

  • SEO:搜索引擎优化(Search Engine Optimization), 通过各种技术(手段)来确保,我们的Web内容被搜索引擎最大化收录,最大化提高权重,最终带来更多流量。

  • 非常明显,SPA程序不利于SEO

    在这里插入图片描述

  • SEO解决方案:提前将页面和数据进行整合

    • 前端:采用SSR
    • 后端:页面静态化 (freemarker 、thymeleaf、velocity)

3 什么是SSR技术

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

    • 在SSR中,前端分成2部分:前端客户端、前端服务端
    • 前端服务端,用于发送ajax,获得数据
    • 前端客户端,用于将ajax数据和页面进行渲染,渲染成html页面,并响应给调用程序(浏览器、爬虫)

    在这里插入图片描述

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

4 SPA和SSR对比

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

5 什么是Nuxt.js

  • Nuxt.js 是一个基于 Vue.js 的通用应用框架。

    • Nuxt支持vue的所有功能,此类内容为前端客户端内容。
    • Nuxt特有的内容,都是前端服务端内容。
  • 通过对客户端/服务端基础架构的抽象组织,Nuxt.js 主要关注的是应用的 UI 渲染
    `内容。

  • 通过对客户端/服务端基础架构的抽象组织,Nuxt.js 主要关注的是应用的 UI 渲染

  • Nuxt.js 预设了利用 Vue.js 开发服务端渲染的应用所需要的各种配置。

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

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

相关文章

VMware虚拟机cpu不支持avx指令集处理

原创作者:运维工程师 谢晋 VMware虚拟机cpu不支持avx指令集处理 客户虚拟化环境内有台虚拟机内应用程序需要使用到avx指令集,排查过物理主机CPU是支持avx指令集,但虚拟机内缺无法正常应用,需将虚拟机CPU修改为硬件模式。将虚拟…

高压配电系统智能监测

高压配电系统智能监测是一种基于现代信息技术的电力系统监测手段,依托电易云-智慧电力物联网,旨在提高高压配电系统的安全性、可靠性和运行效率。具体而言,高压配电系统智能监测包括以下方面: 实时监测:通过安装传感器…

笔记69:Conv1d 和 Conv2d 之间的区别

笔记地址:D:\work_file\(4)DeepLearning_Learning\03_个人笔记\4. Transformer 网络变体 a a a a a a a a a a a

L1-028:判断素数

题目描述 本题的目标很简单,就是判断一个给定的正整数是否素数。 输入格式: 输入在第一行给出一个正整数N(≤ 10),随后N行,每行给出一个小于231的需要判断的正整数。 输出格式: 对每个需要判断的…

stable video diffusion:scaling latent video diffusion models to large datasets

【AIGC-AI视频生成系列-5】Stable Video Diffusion -长文解读视频/3D生成变革的开始 - 知乎一句话总结:长文解读一份Stability AI 最新力作Stable Video Diffusion,如同实验报告的论文,构建了一个高质量的视频生成通用模型,在多种…

cache教程 5.分布式节点的通信

0.对原教程的一些见解 其回顾完请求流程就是抽象了两个接口,PeerPicker和PeerGetter。这样操作,读者阅读时可能很难快速明白其含义,不好理解为什么就创建出两个接口,感觉会比较疑惑。原教程的评论中也有讨论这点。 本教程就先不创…

Error opening file for writing报错解决

报错展示及描述 在安装pycharm的时候出现了一下报错, Error opening file for writing。 报错原因 一般出现这种报错都是文件权限的原因,检查一下,果然这个文件夹权限是【只读】 查看文件权限的方式:【右击】文件夹名称&#xff0…

【23真题】拜托再练一套!保持手感!

今天分享的是23年河北科技大学882的信号与系统试题及解析。 本套试卷难度分析:22年河北科技大学822考研真题,我也发布过,若有需要,戳这里自取!本套试题难度中等偏下,题量适中,对于很多基础知识…

大创项目推荐 协同过滤电影推荐系统

文章目录 1 简介1 设计概要2 课题背景和目的3 协同过滤算法原理3.1 基于用户的协同过滤推荐算法实现原理3.1.1 步骤13.1.2 步骤23.1.3 步骤33.1.4 步骤4 4 系统实现4.1 开发环境4.2 系统功能描述4.3 系统数据流程4.3.1 用户端数据流程4.3.2 管理员端数据流程 4.4 系统功能设计 …

mycat部署和配置读写分离(二)

说明: MyCAT 是使用 JAVA 语言进行编写开发,使用前需要先安装 JAVA 运行环境(JRE),由于 MyCAT 中使用了 JDK7 中的一些特性,所以要求必须在 JDK7 以上的版本上运行。 1. jdk1.8安装 详见jdk环境安装 2. Mysql安装 详见mysql8.0.11源码安装…

Oracle(2-15)RMAN Incomplete Recovery

文章目录 一、基础知识1、The Procedure 不完全恢复步骤2、UNTIL TIME Example 基于时间的恢复3、UNTIL SEOUENCE Example 基于序列的恢复 二、基础操作1、不完全恢复准备工作2、不完全恢复开始恢复 RMAN Incomplete Recovery RMAN的不完全恢复 目标: 使用“UNTIL T…

【开源】基于Vue和SpringBoot的计算机机房作业管理系统

项目编号: S 017 ,文末获取源码。 \color{red}{项目编号:S017,文末获取源码。} 项目编号:S017,文末获取源码。 目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 登录注册模块2.2 课程管理模块2.3 课…

Linux基础指令(2)

今天我们继续来学我们有关于Linux的指令,今天的指令要比上次多多了。开始我们的学习吧。 man手册 先来看标题,手册我们第一时间想到的就是手册的查阅功能,我们都知道在我们上小学的时候,如果遇到不会的字,我们会通过…

《opencv实用探索·十六》opencv直方图计算calcHist函数解析

直方图理解: (对于8位灰度图像亮度/灰度为(0-255),12位灰度图像亮度/灰度为(0-4095)) 以8位图像为例,亮度分为0到255共256个数值,数值越大,代表的亮度越高。其中0代表纯黑色的最暗区域&#xff…

微服务学习:Nacos配置中心

先打开Nacos(详见微服务学习:Nacos微服务架构中的服务注册、服务发现和动态配置&Nacos下载) 1.环境隔离: 新建命名空间: 记住命名空间ID: c82496fb-237f-47f7-91ed-288a53a63324 再配置 就可达成环…

kube-prometheus+kube-thanos

背景 最近在做监控,选择了thanos架构,使用了kube-prometheuskube-thanos,这里记录一下搭建过程。 原理 我选择的是sidecar的方式,这张图画的很好,thanos就理解为多个prometheus的汇合点,当一个query发到t…

npm run build时提示vue/types/jsx.d.ts中的错误

解决方法一: 可能是因为vue版本过高引起的 我直接将package.json中vue以及vue-template-compiler的版本的前面^去掉,安装指定的版本 注意:vue和vue-template-compiler需要版本一致 参考链接:链接 解决方法二: 如果如…

LV.13 D2 开发板启动流程 学习笔记

一、开发板启动过程 EMMC:相当于电脑的外存,断电不丢失 开发板上电后首先运行SOC内部iROM中固化的代码(BL0),这段代码先对基本的软硬件环境(时钟等...)进行初始化,然后再检测拨码开关位置获取启动方式,然后再将对应存储…

解决HTTP 429错误的Scrapy中间件配置

引言 在进行网络数据抓取时,经常会遇到HTTP 429错误,表示请求速率已超出API限制。为避免封禁或限制访问,需要调整Scrapy的请求速率,以在不触发HTTP 429错误的情况下完成数据抓取。针对这一问题,可使用Scrapy的AutoThr…

3DMax物理画笔物体填充放置绘制画笔插件安装使用方法

3DMax物理画笔物体填充放置绘制画笔插件,允许您使用笔刷以非常自然的方式用物品快速填充场景,并使用刚体模拟自动放置它们。 无论你是从事建筑、游戏电影还是商业。。。等等,你经常需要用一些物品为你的场景添加细节。手工放置它们是乏味的&…