基于Vue的SSR

一、什么是ssr？

　　- server side render 服务端渲染

　　基于 Vue/React 单页面应用 实现的服务器端渲染

　　1、传统的vue纯浏览器端渲染 - 浏览器端执行 js

　　　　　　　　

优点	1、局部刷新，用户体验优 2、富交互 3、节约服务器成本
缺点	1、不利于Seo 爬取返回的html页面，搜索引擎只能收录静态页面，不执行js 2、浏览器任务重，一直在执行js，内存占用高 3、首屏加载问题，需要等js运行才能展示

 

　　2、ssr - 执行 js，除了浏览器还有node

　　　　　　　　

 

　　　　　　　怎么把vue实例用node渲染成html字符串？

　　　　　　　核心库：

　　　　　　　　　　· vue

　　　　　　　　　　· vue-server-renderer

 　　　　　　 ssr需要哪些东西？

　　　　　　　　　　

 

　　　　　　　　　　· 纯浏览器渲染的入口有哪些？main.js

　　　　　　　　　　· ssr 需要两个入口：客户端+服务端，生成的bundle也是两个

　　

二、自己手动搭建一个vue+ssr项目

　　特性：

　　　　1、每一次访问必须新建一个vue实例

　　　　2、只会触发组件的 beforeCreate 和 created 钩子，所以需要客户端 js

 　　手动改造的源码见 ：https://gitlab.com/pfSlight/vue-ssr-test.git 

三、ssr框架Nuxt

　　vue - Nuxt

　　react - next

 　　1、创建项目： vue init nuxt-community/starter-template vue-ssr-nuxt

　　 2、查看创建的项目：https://gitlab.com/pfSlight/vue-ssr-nuxt.git