Nuxt.js理解 开启SSR渲染(介绍)---00
Nuxt.js简单的说是Vue.js的通用框架,最常用的就是用来作SSR(服务器渲染)。再直白点说,就是Vue.js原来是开发SPA(单页应用)的,但是随着技术的普及。很多人想用Vue开发多页应用,并在服务端完成渲染。这时候就出现了Nuxt.js这个框架,它简化了SSR的开发难度。还可以直接用命令把我们制作的vue项目生成为静态html。
那服务端渲染到底有什么好处哪?
最主要的原因是SPA单页应用不利于搜索引擎的SEO操作。比如你做一个新闻网站,流量的一个主要来源是通过百度、谷歌、bing这些搜索引擎,但是它们对SPA的抓取并不好,特别是百度根本没法抓取到SPA的内容页面,所以我们必须把我们的应用在服务端渲染成适合搜索引擎抓取的页面,再下载到客户端。那Nuxt.js适合做新闻、博客、电影、咨询这样的需要搜索引擎提供流量的项目。如果你要作移动端的项目,就没必要使用这个框架了。Nuxt.js个人觉得是一个解决方案
什么是SSR?
SSR,即服务器渲染,就是在服务器端将对Vue页面进行渲染生成html文件,将html页面传递给浏览器。SSR两个优点:
SEO不同于SPA的HTML只有一个无实际内容的HTML和一个app.js,SSR生成的HTML是有内容的,这让搜索引擎能够索引到页面内容。
更快内容到达时间,传统的SPA应用是将bundle.js从服务器获取,然后在客户端解析并挂载到dom。而SSR直接讲HTML字符串传递给浏览器。大大加快了首屏加载时间。
Nuxt.js的官方网站是这样介绍的:
Nuxt.js是一个基于Vue.js的通用应用框架。
通过对客户端/服务端基础架构的抽象组织,Nuxt.js主要关注的是应用的UI渲染。
Nuxt.js特点(优点):
nuxt框架将页面分层划分为3层:1、布局;2、页面;3、组件
- 基于Vue.js
- 自动代码分层
- 服务端渲染
- 强大的路由功能,支持异步数据
- 静态文件服务
- ES6/ES7语法支持
- 打包和压缩JS和CSS
- HTML头部标签管理
- 本地开发支持热加载
- 集成ESLint
- 支持各种样式预处理器:SASS、LESS、Stylus等
项目的运行顺序:1.Middleware层-->2.layouts层-->3.pages层-->4.components层
Nuxt.js官网介绍:Nuxt - The Intuitive Vue Framework
Nuxt.js理解 开启SSR渲染(介绍)---00相关推荐
- Nuxt.js开启SSR渲染快速入门
Nuxt.js开启SSR渲染快速入门 第一节:nuxt.js相关概述 nuxt.js简单的说是Vue.js的通用框架,最常用的就是用来作SSR(服务器端渲染).Vue.js是开发SPA(单页应用)的, ...
- Nuxt.js(Vue SSR)创建项目到服务器(Nginx+PM2)部署详细流程
一.什么是 SSR ? SSR 就是 服务器渲染,什么是 服务器渲染?由 服务器 组装好 DOM 元素,生成 HTML 字符串给到浏览器,也就是在浏览器里面是可以看到整个页面的 DOM 源码的. SS ...
- Nuxt.js开启SSR渲染的教程详解
第一节:nuxt.js相关概述 nuxt.js简单的说是Vue.js的通用框架,最常用的就是用来作SSR(服务器端渲染).Vue.js是开发SPA(单页应用)的,Nuxt.js这个框架,用Vue开发多 ...
- Nuxt.js开启SSR渲染及打包发布
什么是SSR? SSR,即服务器渲染,就是在服务器端将对Vue页面进行渲染生成html文件,将html页面传递给浏览器. 那服务器端渲染到底有什么好处呢? (1)SEO 不同于SPA的HTML只有一个 ...
- 使用Nuxt.js框架开发(SSR)服务端渲染项目
(SSR)服务端渲染的优缺点 优点: 1.前端耗时少,首屏加载速度快.因为后端拼接完了html,浏览器只需要直接渲染出来. 2.有利于SEO.因为在后端有完整的html页面,所以爬虫更容易爬取获得信息 ...
- 如何用Nuxt.js构建项目,SSR官网项目搭建流程
SSR渲染 现在Vue,React,angular等三大框架引领的单页面应用大行其道,使用这单页面技术构建的项目比比皆是.这些流行的框架给我们带来的好处显而易见,不仅是开发,维护成本都大大地获得了优化 ...
- Nuxt.js(Vue SSR)项目配置以及开发细节
一.项目中不要使用 v-if 使用 v-if 会在查看源码的时候无法显示标签,需要换成 v-show 二.项目中跳转页面尽量使用 a 标签 无论使用 vue router 还是使用 nuxt-link ...
- nuxt.js部署vue应用到服务端过程
由于seo的需要,最近将项目移植道nuxt.js下采用ssr渲染 移植完成后,一路顺畅,但是到了要部署到服务器端上时候,还是个头疼的问题,但最终还是顺利完成. 现在记录一下部署中的过程. 注:部署时候 ...
- Vue 服务端渲染(SSR)、Nuxt.js - 从入门到实践
前言 10月初有幸接到公司官网改版需求,要求采用服务端渲染模式对原网站进行seo优化. 由于团队一直使用的vue技术栈,所以我第一时间想到的就是采用vue 服务端渲染(SSR)来实现该需求,即能减少团 ...
最新文章
- 【DBMS 数据库管理系统】数据库 体系化环境 ( 数据库体系化环境简介 | 四层体系化环境 | 数据集市 )
- 【内核驱动】 Linux内核源码查看方法(基于Vim)
- 多核处理器_多核处理器还能走多远?2050年用上1024核CPU
- 为什么分布式一定要有redis,redis的一些优缺点
- 第一次使用水晶报表,柱状图的横竖坐标不会定位,怎么办?
- 华为鸿蒙系统和奔驰公司,华为已行动,又是一个千亿BG,奔驰已经加入
- android apk 在线分析,Android Apk安装过程解析
- 将新项目上传到svn
- 人脸识别活体检测技术探讨
- 2010年JNCIA-FWV、JNCIS-FWV教学视频
- uni.navigateTo页面跳转时传对象参数
- R语言置信区间计算(confidence interval)、计算比例值对应的置信区间、为比例值构建95%执行区间、使用glue包把最终结果以标准格式输出
- 苹果se2_太快了!苹果已面向iPhone SE 2用户推送iOS 13.4.1
- 玩电脑的岂能不知道excel怎么合并单元格?
- PyTorch中BN层与CONV层的融合(merge_bn)
- MySql 存储boolean的数据
- 静态代码检查工具 cppcheck 的使用
- 类脑计算与神经网络加速
- 【论文】AMC:AutoML用于移动设备上的模型压缩和加速
- iPhoneX安全区域与H5引发的问题(Safe Area)