Nuxt.js

Nuxt.js是基于Vue.js的服务器端渲染框架,简化了SSR的实现,提高SEO和首屏加载速度。SSR使得应用程序能够被搜索引擎更好地抓取,同时提供更快的初始内容展示。尽管开发成本增加且需要Node.js环境,但SSR适用于重视SEO和快速首屏加载的场景。创建Nuxt项目可通过npx或yarn命令行工具。

Nuxt.js 基于vue的通用应用框架:它建立在同等的Vue技术栈之上,但抽象出很多模板,并提供了一些额外的功能,例如静态站点生成。通过NUXT可以根据约定的规则,快速的实现Vue SSR

1. 什么是服务端渲染(SSR)

Vue.js 是构建客户端应用程序的框架。默认情况下,可以在浏览器中输出 Vue 组件,进行生成 DOM 和操作 DOM。然而,也可以将同一个组件渲染为服务器端的HTML字符串,将它们直接发送到浏览器,最后将这些静态标记"激活"为客户端上完全可交互的应用程序。服务器渲染的 Vue.js 应用程序也可以被认为是"同构"或"通用",因为应用程序的大部分代码都可以在服务器和客户端上运行。

2. 为什么使用服务器端渲染(SSR)?

与传统的SPA(单页面应用程序)相比,服务端渲染的优势主要有哪些?
更好的 SEO,由于搜索引擎爬虫抓取工具可以直接查看完全渲染的页面。
如果你的应用程序初始展示Loading菊花图,然后通过Ajax获取内容,抓取工具并不会等待异步完成后再行抓取页面内容。也就是说,如果SEO对你的站点至关重要,而你的页面又是异步获取内容,则你可能需要服务器端渲染(SSR)解决此问题。
更快的内容到达时间(首屏加载更快),因为服务端只需要返回渲染好的HTML,这部分代码量很小的,所以用户体验更好
使用服务器端渲染(SSR)时还需要有一些权衡之处:
首先就是开发成本比较高,比如某些声明周期钩子函数(如beforeCreate、created)能同时运行在服务端和客户端,因此第三方库要做特殊处理,才能在服务器渲染应用程序中运行。。
由于服务端渲染要用Nodejs做中间层,所以部署项目时,需要处于Node.js server运行环境。在高流量环境下,还要做好服务器负载和缓存策略

3. 总结:SSR应用场景

有SEO需求
需要首屏渲染速度快

4. 搭建一个NUXT项目

*基于使用vue环境基础上
确保安装了npx(npx在NPM版本5.2.0默认安装了):

$ npx create-nuxt-app <项目名>

或者用yarn :

$ yarn create nuxt-app <项目名>

当运行完时,它将安装所有依赖项,因此下一步是启动项目:

$ npm run dev
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值