Nuxt2 Server Side Rendering(服务端渲染)

365 阅读2分钟

Server Side Rendering(服务端渲染)

Nuxt.js简单的说是Vue.js的通用框架,最常用的就是用来作SSR(服务器端渲染)

目的是为了解决单页面应用的 SEO 的问题,对于一般网站影响不大,但是对于论坛类,内容类网站来说是致命的,搜索引擎无法抓取页面相关内容,也就是用户搜不到此网站的相关信息。

Nuxt是什么

Nuxt不是Vue官方提供的 Nuxt是基于Vue的服务端渲染的框架 Nuxt.js 预设了利用 Vue.js 开发服务端渲染的应用所需要的各种配置。 vue开发的SPA(单页应用)不利于搜索引擎的SEO优化,Nuxt.js适合作新闻、博客、电影、咨询等需要搜索引擎提供流量的项目。

Nuxt请求数据

发请求取数据的操作: 如果 需要SEO,写在asyncData中,如果不需要SEO,则可以写到mounted中, 不要写在created中,因为它会在服务器端和客户端渲染时都执行,如果这里写调用接口取数据,则会请求两次。

注意事项:

1. 由于在客户端创建实例化之前加载,所以不能使用 this,钩子提供一个参数,可以获取上下文对象({isDev, route, store, env, params, query, req, res, redirect, error}等),从而做一些简单操作。

2.只能在路由页面组件中使用(每次加载页面都会调用),在自定义组件中无效。

3. 返回的数据最终将与 data 数据合并,为了保证不发生页面渲染错误,返回的键应事先在 data 里声明好(如果 template 中没有使用所需属性,则并不必声明)。

4.钩子在路由转换期间解析,所以在 return 之前会一直等待内部逻辑处理,阻止页面加载。如果要抛出异常,可以使用参数提供的 error 方法。

Nuxt打包

vuecli打包之后得到的是一个dist 目录,就是index.html,.js,css… 。是可以双击打开的(不包含服务器代码,与服务器没有任何的关系,它就是发ajax,获取数据,并显示)。 —spa客户端渲染

nuxt项目打包之后会得到客户端与服务器端的代码,在上线时,需要把服务器代码也上线。—ssr服务端渲染