Vue服务端渲染避免状态回传

vue2开始支持ssr(Server-Side-Rendering),我使用的版本如下:

{
    "vue": "^2.3.3",
    "vue-resource": "^1.3.1",
    "vue-router": "^2.5.3",
    "vue-server-renderer": "^2.3.3",
    "vuex": "^2.3.1",
    "vuex-router-sync": "^4.1.2"
}

我是按照vue-ssr官方教程 中提供的vue-hackernews-2.0的例子来写的,跑起来没毛病。你可以在这里看到这个示例。ssr中有个重要的步骤是前后端的状态需要同步,一般用个中央状态容器(vue使用vuex,react用redux或flux)来保持并且同步状态。现在通用的同步方法就是在服务端将状态JSON通过类似如下的方式插入渲染好的HTML中:

<script>
window.__INITIAL_STATE__= { "prop": "value" };
</script>

然后在浏览器端初始化状态容器(vue中是vuex),将这个状态传入状态容器中初始化容器,自此,完成了前后端状态的统一。

介绍完背景,问题来了。我们做了一个游戏玩家社区,类似:https://www.taptap.com/,这种网站的特点是既有交互性的操作,但也有大量的静态不变的内容。设想一个文章详情页面,假设文章很长,内容特别多,并且这个页面没有什么需要双向绑定带交互性的东西,这个时候我再回传这个状态,你可以想象这差不多将页面大小增加了几乎一倍,占用了用户过多的流量。比如,你去查看官方示例的渲染支出页面:view-source:https://vue-hn.now.sh/top图片描述

你就会明白我的担忧了。我试过很多方法,也问过百度一个专门做服务端渲染的资深工程师,得到的结果都是做服务端渲染,必须回传状态,因为vue在客户端会再做一次同步,如果状态不统一,你的页面会重新渲染一次。所以,就这个问题,看看社区是否碰到我类似的忧虑,有什么好的解决方案,谢谢!

阅读 2.4k
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题