社区微信群开通啦,扫一扫抢先加入社区官方微信群
社区微信群
首先来说说SSR,什么是SSR?SSR是最近挺火的一个词,意为 Server Side Rendering(服务端渲染)即服务端返回完整的HTML页面浏览器,包括数据信息。那这和Vue有啥不同呢?总所周知,Vue是为客户端渲染(*注:*服务端只返回数据给浏览器,页面在前端静态服务器)推出的框架,前后端分离的模式下,客户端渲染为主流。那么,我们为什么还要服务端渲染呢?让我们来一一比较服务端渲染和客户端的优缺点你就知道了。
优点:返回完整的页面,即首屏渲染时间比较快,对网速一般的用户体验较好。
**缺点:**对服务器资源压力较大,对于高并发请求难以应付。
优点:服务器只返回数据,渲染由浏览器完成。页面切换快,高并发情况下,服务器的压力没那么大。
**缺点:**首屏渲染可能要经历较长白屏时间(当然只是相对),SEO搜索引擎优化效果不好,这对需要流量的博客网站等简直致命。
所以 SSR适用场景:
对SEO要求较高的网站,比较需要流量的网站如博客网站。
为优化用户体验,同时服务器资源压力不大。
客户端网络较慢,JS引擎较老。
Nuxt.js的官方介绍:
Nuxt.js 是一个基于 Vue.js 的通用应用框架。
通过对客户端/服务端基础架构的抽象组织,Nuxt.js 主要关注的是应用的 UI渲染。
我们的目标是创建一个灵活的应用框架,你可以基于它初始化新项目的基础结构代码,或者在已有 Node.js 项目中使用 Nuxt.js。
Nuxt.js 预设了利用 Vue.js 开发服务端渲染的应用所需要的各种配置
Nuxt是服务器呈现的应用程序框架,在node.js上进一步封装。让开发者专注于UI的渲染。简而言之,Nuxt就是Vue的SSR版本。Vue官方给出Nuxt工作原理的图片:
具体的流程如下图:
简单讲,当你访问NUXT构建的页面时会发生如下操作:
在nuxt/lib/core的源码目录下找到render.js这个文件,这也是渲染的逻辑所在。其中有三个重要的方法:render(), renderRoute(), renderAndGetWindow()。
上图解释了NUXT如何处理客户端渲染和服务端渲染。相关代码如下:
// Call renderToString from the bundleRenderer and generate the HTML (will update the context as well)
let APP = await this.bundleRenderer.renderToString(context)
if (!context.nuxt.serverRendered) {
APP = '<div id="__nuxt"></div>'
}
在**render()方法在处理完一系列的路径问题后,会调用renderRoute()方法,获取响应所需内容并完成响应。其中renderRoute()方法会判断当前响应是否应执行服务端渲染。如果是,则调用vue提供的bundleRenderer()方法,把html内容渲染完毕以后再整体输出;如果不是,则直接输出一个
字符串,交由客户端渲染。最后,通过renderAndGetWindow()**来检查输出的html是否存在问题,然后发出通知,表明html可用。步请求数据(需要引入 axios 库),而且对 vuex 有进一步的封装
3. 内置了 webpack,省去了配置 webpack 的步骤,nuxt 会根据配置打包对应的文件
如果觉得我的文章对您有用,请随意打赏。你的支持将鼓励我继续创作!