Nuxt.js框架(SSR)学习笔记
时间:2022-07-23
本文章向大家介绍Nuxt.js框架(SSR)学习笔记,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
1.概念
1.1-SSR和CSR、spa
- SSR:serve side render,服务端渲染技术
- CSR:client side render,客户端渲染技术
- SPA:spa是单页面应用程序, vue 框架 是一种语法而已。只是一种spa的技术实现, react 也是spa技术的一种实现。
1.2-Nuxt
是一个 实现服务端渲染(SSR) 的开发框架 (*只不过语法类似vue而已*),Vue官方介绍:Nuxt 是一个基于 Vue 生态的更高层的框架,为开发服务端渲染的 Vue 应用提供了极其便利的开发体验。更酷的是,你甚至可以用它来做为静态站生成器。
2.Nuxt.js创建项目的区别
2.1-如何创建一个nuxt.js的项目?
通过官网提供的脚手架工具:create-nuxt-app
我们只需要运行命令:npx create-nuxt-app projectname
,然后选择你需要的一些插件组件库服务等后之后就可以成功创建一个Nuxt项目啦!
2.2-Nuxt项目和普通vue项目的区别
- 一个是 nuxt的项目, nuxt 是 使用vue语法的一种 实现ssr 技术的框架, 它是服务端渲染技术ssr
- 一个是普通的vue项目,它是客户端渲染技术csr
具体区别可以通过F12检查元素对比他们的HTML结构看出来
3.服务端渲染技术(SSR)和客户端渲染技术(CSR)的优缺点
3.1-服务端渲染技术(SSR):
- 优点:
- 1.尽量不占用前端的资源,前端这块耗时少,速度快。
- 2.有利于SEO优化,因为在后端有完整的html页面,所以爬虫更容易爬取信息。
- 缺点:
- 1.不利于前后端分离,开发的效率降低了
- 2.对html的解析,对前端来说加快了速度,但是加大了服务器的压力。
3.1-客户端渲染技术(CSR)
- 优点:
- 1.前后端分离,开发效率高。
- 2.用户体验更好,我们将网站做成SPA(单页面应用)或者部分内容做成SPA,当用户点击时,不会形成频繁的跳转。
- 缺点:
- 1.前端响应速度慢,特别是首屏,这样用户是受不了的。
- 2.不利于SEO优化,因为爬虫不认识SPA,所以它只是记录了一个页面。
4.总结
- 客户端渲染是 吃火锅, 厨房将厨具和原材料都交给客人,客人自己煮
- 服务端渲染是 吃炒菜, 厨房将原材料在厨房内做好,才端出来,客人拿到了可以直接吃
- spa是单页面应用程序, vue 框架 是一种语法而已。只是一种spa的技术实现, react 也是spa技术的一种实现。
- 客户端 是csr , 服务端端是ssr ,vue 是语法, nuxt 是 使用vue语法的一种 实现ssr 技术的框架而已
- Python Numpy学习教程(一)Python篇
- MySQL数据库基础——本地文件交互
- 左手用R右手Python系列之——noSQL基础与mongodb入门
- 左手用R右手Python系列之——数据框与apply向量运算
- 左手用R右手Python系列之——迭代器与迭代对象
- 【关关的刷题日记61】Leetcode 102. Binary Tree Level Order Traversal
- 【关关的刷题日记62】Leetcode 104. Maximum Depth of Binary Tree
- DataAnnotations - InverseProperty Attribute:
- 【关关的刷题日记63】Leetcode 111 Minimum Depth of Binary Tree
- Configure Many-to-Many relationship:
- 【关关的刷题日记64】Leetcode 110 Balanced Binary Tree
- 左手用R右手Python系列之——json序列化与反序列化
- 【干货】GAN调研:多极扩展(跨域和条件的GAN扩展模型调研)
- 【干货】TensorFlow实战——图像分类神经网络模型
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Celery 分布式框架 学习
- .NET Core + K8S + Loki 玩转日志聚合
- varint是啥你真的知道么?
- 一篇文章带你入门移动安全
- Could not load JDBC driver class [com.mysql.jdbc.Driver]
- [Bazel]自定义规则实现将多个静态库合并为一个动态库或静态库
- [Golang]包管理
- Power Query中避免出错的几种情况
- 我的开发日记(十五)
- 常见未授权访问漏洞总结
- 如何用命令行给mySQL添加用户
- [877]ModuleNotFoundError:no module named ‘tools.nnwrap‘ 解决办法
- Selenium自动化:代码测试与无代码测试
- 个人独立博客搭建教程(win),如何快速搭建博客
- dotnet OpenXML 解压缩文档为文件夹工具