从零开始搭建vue-ssr系列之一:写在前面的话

为什么要用vue-ssr?
  • 前端用的是vue, 后端渲染用vue-ssr,可以无缝的和前端连接起来
  • 使用vue-ssr可以把数据渲染成HTML, 并在首屏展示, 用户体验好, 传统的前端vue, 服务器第一次请求只返回#app的空DOM, 当js和ajax请求完成, 才会展示, 体验差
  • 利于SEO
是所有情况都适用vue-ssr吗?
  • 当然不是, 他的最最主要作用是首屏渲染, 其他都是次要的, 比如有3个tab页签, 只有第一个页签是首屏展示的, 其他两个是通过点击才展示数据, 那这样就没有必要把另外两个页签的数据也取出来, 做vue-ssr, 这样会增加服务器端的压力和流量, 这个后面会说到
vue-ssr很容易上手吗?
  • 说实话, 不是很容易, 虽然现在网上的例子很多, 官方也有一个例子vue-hackernews, 但是官方给出的例子太复杂, 属于大而全的例子, 不太适合原理不太清楚的新手, 网上的例子一般都是半个流程, 比如只告诉你渲染简单的模板, 根本不会把项目中用到的整个流程都串起来, 而且机理性的东西的文章也少,增加了学习的难度。
说了这么多,你写的东西能干啥?
  • 这个系列文章是从头开始搭建整个项目的,从一个实际的一个简单的场景,告诉你怎么样用client端渲染,怎么在server端取数据,并传递给前端,达到数据共享,以及告诉你用ssr时踩的一些坑,如何解决的。我搞这个也搞了一段时间,网上资料也查了好多,我也算是集各家之所长吧,尽量写的详细些,帮忙各位能从0开始搭建起来。
技术栈是什么?
  • vue2+webpack2+vuex+axios
Vue-SSR系列目录

从零开始搭建vue-ssr系列之一:写在前面的话

从零开始搭建vue-ssr系列之二:纯client端渲染以及webpack2+vue2注意事项

从零开始搭建vue-ssr系列之三:服务器渲染的奥秘

从零开始搭建vue-ssr系列之四:Vuex详解

从零开始搭建vue-ssr系列之五:开始第一个简单的server-render

从零开始搭建vue-ssr系列之六:一个完整的项目

阅读 19k

推荐阅读
奥巴驴
用户专栏

干货

75 人关注
29 篇文章
专栏主页