vue ssr服务端渲染(vue+nuxt)-季度分享

李洪威

image.png
今天给大家分享的是Vue服务端渲染,大概会占用大家40分钟的时间,今天分享的目的主要是让大家理解三个点:
image.png
1、深入理解服务端渲染(SSR)概念

2、掌握实现服务端渲染的Vue通用框架nuxt.js使用

3、理解Vue SSR实现原理
image.png
在深入理解服务器端渲染之前,我们先要知道什么是服务器端渲染?我们可以从早期的web开发说起,那个时候前后端还没有分离,前端是不是只负责发起请求,后端查询数据库数据,数据塞到jsp,php等模板,业务逻辑和数据处理是不是都在后端啊,然后后端给前端返回一个html页面,前端只负责展示,所以是不是可以理解为在服务端就生成好的html页面,是不是就是服务端渲染;那什么是客户端渲染,是不是可以理解成在客户端生成好的html页面就是客户端渲染啊?

那什么是多页面应用和单页面应用呢?早期的web开发是不是就是多页应用的一种,每次请求都是整页加载刷新,应用由多个完整的页面构成

那什么是单页面应用呢?我们pc端管理后台是不是就是单页面应用的一种,通俗一点说就是指应用只有一个主页面的应用,我们去看单页面应用,右键 ‘查看网页源代码’ 是不是只有一个壳<body><div id='app'></div></body>单页面应用浏览器一开始要加载所有必须的 html, js, css,然后在交互的时候由路由程序动态载入,单页面的页面跳转,仅刷新局部资源。

那说了这么多,我们知道服务端渲染ssr解决了什么问题?有什么好处?
image.png
1、更好的 SEO

为什么说有更好的seo呢,其实刚刚就回答了这个问题,服务端渲染返回的是完整的网页内容,是不是搜索引擎爬虫能爬的到你网页里面的内容,而单页面应用只有一个壳,爬虫不会爬取到js异步加载的内容

2、更快的首屏内容到达时间

为什么说服务端渲染有更快的首屏内容到达时间呢?是不是这个快慢是跟单页面相比较的,刚刚我们是不是已经回答了,单页面应用才需要浏览器一开始要加载所有必须的 html, js, css,所以首屏是不是比服务器端渲染慢
image.png
那现在我们已经理解了服务器端渲染和单页面应用的优缺点,如果我们要开发一个网站,比如下个季度官网的开发,注重seo优化,希望网页内容能被搜索引擎爬到,是不是有必要考虑服务器端渲染的方式,那我们有可能回到早期的开发方式吗,后端同学估计不答应,那我们vue服务器端渲染就是一个折中方案首屏实现服务器端渲染,有利于seo优化,同时又具备单页面应用优点;

那我们如何新建一个基于vue+nuxt的ssr项目,类似于vue-cli手脚架工具,我们执行$ npx create-nuxt-app <项目名>,快速创建了如下目录结构的项目:

(npx与npm的区别,简单讲解)

对着ppt解释项目目录结构;......
image.png
只有 beforeCreate 和 created 会在服务器端渲染 (SSR) 过程中被调用。这就是说任何vue其他生命周期钩子函数中的代码,只会在客户端执行。
image.png
image.png
结合实际demo演示讲解以下重点:
image.png
只是首屏服务器端渲染,同时具备SPA应用的优点

l 如何实现基础路由、如何实现动态路由、如何实现嵌套路由 https://zh.nuxtjs.org/guide/routing

l nuxt自己集成了vuex,所以不需要安装,在/store目录下新建index.js即可使用

l 异步数据获取fetch、asyncData使用范围

只能在页面组件使用,也就是pages目录下的组件,而不是components目录下的组件,要有所区分

beforeCreate之前会执行这个asyncData函数,return的数据最终会和data中的合并

l Header、Footer等公共组件放哪?

vue-cli入口文件是app.vue,在nuxt开发当中则是./layout/default.vue

l 所有插件都写在/plugins目录下,这里以element-ui.js为例

l nuxt.config.js配置

l 配置错误页面

   你可以通过编辑 layouts/error.vue 文件来定制化错误页面

阅读 2.5k

see you tommorrow!

1.1k 声望
77 粉丝
0 条评论

see you tommorrow!

1.1k 声望
77 粉丝
文章目录
宣传栏