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

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

被折叠的 条评论
为什么被折叠?



