3-3-2服务端渲染基础

1.概述
单页面应用 优缺点
优点
1.用户体验好
2.开发效率高
3.渲染性能好
4.可维护性好
。。。

	缺点
		1.首屏渲染时间长
		2.不利于SEO

1.nuxt.js介绍
构建同构应用
集成了 vue2
vue-router
vuex
vue服务器渲染 mode： spa
vue-meto

	使用 webpack wue-loader  babel-loader
	
	服务端渲染  ssr
	单页应用程序  spa
	静态化 预渲染

2.nuxt.js构建 – 路由

.nuxt下的 
	router.js 自动生成
路由--基础路由
	根据pages目录结构 自动生成vue-router模块的路由配置
	

路由导航
	a标签  
		刷新整个页面 不推荐使用  走服务端渲染
	nuxt-link组件   不刷新
		router-link 类似
	编程式导航
		button @click
		可以编写逻辑
		onclick
		
动态路由
	同vue-router 动态路由一致
	下划线开头的vue文件 自动生成 为动态路由
	
嵌套路由
	嵌套组件处理页面
	添加一个vue文件  与该文件同名的目录
	
自定义路由
	router :{
		base: ’/abc'
	}
	extendRoutes  自定义路由表规则
	配置元素查文档
			localhost:3000/abc/

3.nuxt.js 视图模板–结构 最外层的页面
src目录下创建app.html的文件

视图 --布局  layouts     公共部分
	在布局文件中添加<nuxt/> 组件用于显示页面的主体内容

4.异步数据
如何在服务端渲染动态页面

// 当你想要动态页面内容有利于 SEO 或者是提升首屏渲染速度的时候，就在 asyncData 中发请求拿数据
  async asyncData () {
	console.log('asyncData')
	console.log(this)
	const res = await axios({
	  method: 'GET',
	  url: 'http://localhost:3000/data.json'
	})
	return res.data
  },
  服务端渲染提高首屏渲染速度 有利于seo
  在客户端也会调  路由导航的时候
  
  基本用法
	它会将asyncData返回的数据融合组件data方法返回数据一并给组件
	调用时机：服务端渲染期间和客户端路由更新之前
	
注意事项
	只能在页面组件中使用
	没有this，因为实在组件初始化之前被调用的